[英]Fade out divs one at a time using JQuery
我有這個功能,可以淡出每個 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");
});
});
});
這是您可以使用的邏輯:鏈接
$(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();
})
});
});
});
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/
請給我加分。
這有點冗長,但我喜歡它,因為它使用遞歸函數來隨機化淡入淡出的延遲:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.