Question

我四处寻找并尽力而为，但无法找到如何实现以下目标：

循环通过未知数量的div
有某种动画（可能只是110％的简单宽度增长）
每个Div淡入/淡出
最终div淡出和第一个淡入淡出之间的延迟

我的当前代码如下

HTML

.popup {
    display: none;
    width: 400px;
    height: 80px;
    background: #000;
    color: #fff;
    line-height: 80px;
    text-align: center;
}
.r{background:red}
.b{background:blue}
.g{background:green}
.y{background:yellow}

CSS

var popups = $('.popup');
var i = 0;

function step() {
    if (i >= popups.length)
        i = 0;
    $(popups[i]).fadeToggle(300);
    i++;
}

setInterval(step, 2000);

的jQuery

{{1}}

正如你所看到的，我的div在显示之前不会淡出，这是不可取的。

Answer 1

您可以将动画与delay之间的动画链接在一起：

function next() {
    if (i >= popups.length)
        i = 0;
    popups.eq(i).fadeIn(300).delay(2500).fadeOut(300).delay(1000).queue(function(){
            next();
            $(this).dequeue();
        });
    i++;
}

next()

（注意：我使用的popups.eq(i)与$(popups[i])）

相同

实例：http://jsfiddle.net/3ujb7k4L/7/

Answer 2

这样的东西？

var popups = $('.popup');
var i = 0;

function fadeOutLater(popup) {
    setInterval(function() {
        popup.fadeOut(500);
    }, 5000);
}

function step() {
    var popup;
    if (i >= popups.length)
        i = 0;
    popup = $(popups[i]);
    popup.fadeIn(300, fadeOutLater(popup));
    i++;
}

setInterval(step, 2000);

Answer 3

要在隐藏最后一个元素和再次显示第一个元素之间创建一个更长的暂停，您可以在重置计数器时跳过一个fadeIn / fadeOut循环：

var popups = $('.popup');
var i = 0;

function step() {
   if (i >= popups.length) {
        i = 0;
    } else {
        $(popups[i]).delay(300).fadeIn(300).delay(200).fadeOut(300).delay(200);
        i++;
    }    
}

setInterval(step, 2000);

像这里：http://jsfiddle.net/r72qpher/

通过未知数量的Div，淡入/淡出，延迟时间间隔

3 个答案: