交换具有相同类的两个 div答案

【问题标题】：Swap two divs with a same class交换具有相同类的两个 div
【发布时间】：2013-12-06 18:14:34
【问题描述】：

我有点被这个小部分卡住了，我无法继续我的项目。基本上我要做的是在具有相同类的两个 div 之间淡入/淡出，但要使函数尽可能短。

我已经进行了以下操作，但显然只有当两个 div 都隐藏在 begginging 中并且我需要在加载时显示默认标题（第一个 div）并且 2 秒后我想切换到另一个标题然后它会保持循环往复。

HTML：

<div class="ref-title">Sample Title #1</div>
<div class="ref-title">Sample Title #2</div>

JS：

function titleSwap () {
    $('.ref-title:hidden:first').fadeIn(500).delay(2000).fadeOut(500, function () {
        $(this).appendTo($(this).parent());
        titleSwap();
    });
} titleSwap();

CSS：

.ref-title {
    display: none;
}

JS Fiddle Demo

所以我需要第一个 div 显示为块，然后它会消失，另一个会出现并继续这样...有什么提示吗？

【问题讨论】：

你为什么使用 :hidden？

标签： javascript jquery

【解决方案1】：

JSFiddle - 将一个隐藏类添加到您想要以隐藏开始的 div 中，然后按以下方式更改功能。

HTML

<div class="ref-title">Sample Title #1</div>
<div class="ref-title hidden">Sample Title #2</div>

CSS

.hidden {
    display: none;
}

(function titleSwap() {
    $('.ref-title').not('.hidden').delay(2000).fadeOut(500, function () {
        var $me = $(this);
        $('.ref-title.hidden').removeClass('.hidden').hide().fadeIn(500, function () {
            $(this).removeClass('hidden');
            $me.addClass('hidden');
            titleSwap();
        });
    });
})();

此外，如果您不想在标记中包含 DIV 上的隐藏类，您可以在 titleSwap 函数之前使用 $('.ref-title:nth-child(2)').addClass('hidden'); 将类添加到第二个 DIV。

【讨论】：

【解决方案2】：

如果你可以只使用显示/隐藏，你可以这样尝试：show/hide Example

function toggleTitle() {
  $('header > h2').delay(2000).toggle('fast', function () {
    toggleTitle();
  });
}

如果你必须使用fadeIn/fadeOut，由于标题之间的并发淡入淡出效果，它有点复杂......这是我的解决方案fadeIn/Out Example

function toggleTitle() {
  var visible = $('header > h2:visible');
  var hidden  = $('header > h2:hidden');

  visible.delay(2000).fadeToggle('fast', function () {
    hidden.fadeToggle('fast');
    toggleTitle();
  });
}

【讨论】：

【解决方案3】：

如果你把身份证放在他们身上很容易，这可能吗？看看这个答案 jQuery fadeOut one div, fadeIn another on its place

$('#fadeout').fadeOut(300);
$('#fadein').delay(2000).fadeIn(300);

如果您无法添加 ID，请尝试此操作。它假定它们是其直接父级下的唯一元素

$('.ref-title:first-child').fadeOut(300);
$('.ref-title:last-child').delay(2000).fadeIn(300);

【讨论】：

他想让动画继续进行，每 2 秒让一个可见的 fadeOut 和隐藏的一个 fadeIn。