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显示为块然后它会消失而另一个会出现并继续这样...任何提示？

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。

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

Answer 3

如果你把ID放在它们身上很容易，这是否可行？看看这个答案 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);

交换两个具有相同类的div

3 个答案: