使用 JQuery 一次淡出一个 div答案

【问题标题】：Fade out divs one at a time using JQuery使用 JQuery 一次淡出一个 div
【发布时间】：2015-08-30 19:10:11
【问题描述】：

我有这个功能，除了被点击的那个之外，每个 div 都会淡出。目前它们都同时淡出，但我希望它们一次淡出一个。

我还希望 div 以随机顺序淡出，以便任何能告诉我如何操作的人都可以加分！

$(".grid-item").click(function () {

  var selected = this;

  $('.grid > div').not(selected).each(function(i) {
    $(this).fadeTo(200, 0, function(){
      $(this).css("visibility", "hidden");
    });
  });

});

【问题讨论】：

加分在哪里..大声笑：D
@TusharRaj，我总是想知道！或者当他们对也可以做 xyz 的人说 bonus 时。什么奖金？在哪里？ :)
试试这个 -> $('.grid > div').not(selected).each().delay(200).fadeTo(200,function () { $(this).css("visibility", "hidden"); });
True ..LOL 再次：D @AmmarCSE

标签： javascript jquery html delay fadeout

【解决方案1】：

var selected;

var fader = function() {
    $('.grid > div').not(selected).not(':hidden').first().fadeOut(200, fader);
};

$(".grid-item").click(function () {
    selected = this;
    fader();
});

关于随机性，请看：

http://blog.mastykarz.nl/jquery-random-filter/

请给我加分。

【讨论】：

【解决方案2】：

这是您可以使用的逻辑：link

$(document).ready(function () {
    $(".grid-item").click(function () {
        var selected = this;
        var queue = $.Deferred().resolve(); // create an empty queue
        $('.grid > div').not(selected).get().forEach(function (div) {
            queue = queue.then(function () {
                return $(div).fadeTo(200, 0).promise();
            })
        });
    });
});

DEMO 附赠 randomizing array: jsFiddle

【讨论】：

谢谢...这很好用。除此之外，它不会以随机顺序褪色。您将如何添加此功能？
@GusPowell 但在 jsFiddle 中，它以随机顺序淡出：jsfiddle.net/scdsumc4

【解决方案3】：

这有点冗长，但我喜欢它，因为它使用递归函数来随机化淡入淡出的延迟：

var doms = [];
var randos = [];
var index = 0;

$(".grid-item").click(function () {
    var selected = $(this);
    doms = $('.grid > div').not(selected);
    var num = Math.floor(Math.random() * doms.length);
    for (var i = 0; i < doms.length; i++)
    {
        while (randos.indexOf(num) > -1)
        {
            num = Math.floor(Math.random() * doms.length);
        }
        randos.push(num);
    }
    fadeout();
})

window.fadeout = function () {
    if (doms.length > 0) {
        var random = $(doms.get(randos[index]));
        $(random).delay(200 * index).fadeTo(200, 0, function () {
            $(random).css("visibility", "hidden");
        });
        doms = doms.not(random);
        index++;
        fadeout();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
    <div class="grid-item">hello</div>
    <div class="grid-item">how</div>
    <div class="grid-item">are</div>
    <div class="grid-item">you</div>
    <div class="grid-item">today</div>
</div>

【讨论】：