javascript - 交换两个具有相同类的 div

Question

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

我已经做了以下操作，但显然只有当两个 div 都隐藏在乞讨中并且我需要在加载时显示默认标题(第一个 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 显示为 block ，然后它会消失，另一个会出现并继续这样......有什么提示吗？

Answer 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;
}

JS

(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 上的隐藏类，则可以使用 $('.ref-title:nth-child(2)').addClass( 'hidden'); 在 titleSwap 函数之前将类添加到第二个 DIV。