使用jQuery一次淡出div一个

Question

我有这个功能，淡出每个部分除了已被点击。目前它们都在同一时间淡出，但我希望它们一次淡出一个。

我还想让div以随机顺序淡出，这样可以给任何能告诉我的人多加分！

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

    var selected = this; 

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

}); 

Answer 1

这是逻辑分析，你可以使用：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

Answer 2

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/

请给我奖励积分。

Answer 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>