Question

我有两个div，绝对可以坐在彼此之上。我只是想创建一个简单的jQuery函数，它会消除顶部的div（.group-fcallout-b）以显示下面的那个（.group-fcallout -a）。

这是我的JS：

$(document).ready(function() {
    InfiniteRotator();
});

function InfiniteRotator() {

  var fadeO = setInterval(function() {
    $('.group-fcallout-b').fadeOut(500);
  }, 5000);

  clearInterval(InfiniteRotator);

  var fadeI = setInterval(function() {
    $('.group-fcallout-b').fadeIn(500);
  }, 5000);
}

我认为我现在遇到的问题是fadeO在fadeOut完成后立即启动 - 显然我希望两个函数之间有延迟。

JSFiddle Link：https://jsfiddle.net/02xLjh1y/11/

非常感谢！

Answer 1

以下是实现我认为目标的一种方式（fiddle here）：

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

[编辑：在逐渐退回之前添加了超时]

由于fadeIn和fadeOut都采用可选的回调参数，因此您可以利用此参数而不是<div class="content"> <img src="http://placehold.it/150x100">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, est. <img src="http://placehold.it/150x100"> </div>。

N.B。我不知道你是否关心，但是使用资本＆＃39;我＆＃39;在$(document).ready(function() { InfiniteRotator(jQuery.fn.fadeOut, jQuery.fn.fadeIn); }); function InfiniteRotator(fadeFunc, callback) { fadeFunc.call($('.group-fcallout-b'), 500, function() { setTimeout(function() { InfiniteRotator(callback, fadeFunc); }, 1000); }); }中有点不寻常 - 通常大写字母往往意味着这是一个构造函数，它不是。

Answer 2

它实际上只是一个班轮：

setInterval(function(){ $('.group-fcallout-b').fadeToggle(500); }, 5000)

更新fiddle

Answer 3

这对你来说是否正确？ See this fiddle

我在第二个中更改了超时值。

  var fadeO = setInterval(function() {
    $('.group-fcallout-b').fadeOut(500);
  }, 5000);

  clearInterval(InfiniteRotator);

  var fadeI = setInterval(function() {
    $('.group-fcallout-b').fadeIn(500);
  }, 10000);

Answer 4

this怎么样？

$(document).ready(function() {

    InfiniteRotator();

});

function InfiniteRotator() {
    var flag = 1;

    var fadeOut = function() {
        $('.group-fcallout-b').fadeOut(500);
        flag = 0;
    }

    var fadeIn = function() {
        $('.group-fcallout-b').fadeIn(500);
        flag = 1;
    }

    var timer = setInterval(function(){
        if(flag)
            fadeOut();
        else
            fadeIn();
    }, 5000);
}

无限循环消除div以显示div下方

4 个答案: