Question

我试图在0.5到5秒之间的随机时间段之后将一个类“翻转”添加到随机的“子”div中。然后三秒钟之后应该删除该类。

div的布局如下：

<div class="parent">
    <div class="child"><img src="image.jpg"></div>
    <div class="child"><img src="image.jpg"></div>
    <div class="child"><img src="image.jpg"></div>
    <div class="child"><img src="image.jpg"></div>
    <div class="child"><img src="image.jpg"></div>
    <div class="child"><img src="image.jpg"></div>
</div>

我到目前为止的jquery是：

$(document).ready(function () {
    var $children = $(".child");
    var interval = setInterval(function () {
        var $d = $children.not(".flip");
        $d.eq(Math.floor(Math.random() * $d.length)).addClass('flip');
        if ($d.length == 1) {
            clearInterval(interval);
        }
    }, Math.floor((Math.random() * 4500) + 500));
});

不太确定如何在3秒后再次删除课程？

谢谢！

Answer 1

您需要在区间中使用函数末尾的setTimeout：

$(document).ready(function () {
    var $children = $(".child");
    var interval = setInterval(function () {
        var $d = $children.not(".flip");
        var $el = $d.eq(Math.floor(Math.random() * $d.length));
        $el.addClass('flip');
        setTimeout(fucntion() { $el.removeClass('flip'); }, 3000 );
        if ($d.length == 1) {
            clearInterval(interval);
        }
    }, Math.floor((Math.random() * 4500) + 500));
});

Answer 2

从您的代码开始，因为您只想添加一次类，以及超时计时器，您还必须使用另一个额外的类

$(document).ready(function () {
    var $children = $(".child");
    var interval = setInterval(function () {
        var $d = $children.not(".done");
        var $el = $d.eq(Math.floor(Math.random() * $d.length)).addClass('flip done');
        setTimeout(function () {
            $el.removeClass('flip');
        }, 3000)
        if ($d.length == 1) {
            clearInterval(interval);
        }
    }, Math.floor((Math.random() * 4500) + 500));
});

演示：Fiddle

另一种选择是

$(document).ready(function () {
    var $todo = $(".child");
    var interval = setInterval(function () {
        var $el = $todo.eq(Math.floor(Math.random() * $todo.length)).addClass('flip');
        setTimeout(function () {
            $el.removeClass('flip');
        }, 3000)
        if ($todo.length == 1) {
            clearInterval(interval);
        }
        $todo =$todo.not($el);
    }, Math.floor((Math.random() * 4500) + 500));
});

演示：Fiddle

jQuery随机延迟后将类添加到随机div

2 个答案: