[英]JQuery FadeOut, Load and FadeIn
我有以下代碼用於fadeOut,加載另一個內容和fadeIn,但是我有一個問題,有時,當加載功能非常快時,即使在時間軸完全淡出之前,它也會切換加載的內容,因此效果在這種情況下有點奇怪。 我該如何預防?
注意我想在單擊后立即加載內容,因此不能將加載功能放到第一個fadeTo回調函數中。 謝謝!
$(".switches li").click(function(evn) {
$(".switches li").removeClass("active");
$(evn.target).addClass("active");
$(".timeline").fadeTo(400, 0, function(){
$(this).css("visibility", "hidden");
});
$(".timeline").load("inc-timeline/"+evn.target.id+".html", function() {
$(this).fadeTo(400, 100, function() {
$(this).css("visibility", "visible");
if(evn.target.id === "data-girls") {
$(".data-girls-powered").fadeIn(400);
} else {
$(".data-girls-powered").fadeOut(400);
}
});
});
});
使用.animate()
.finish()
start
選項
// call `.load()` when `.fadeTo(400, 0)` starts
$(".timeline").finish().animate({opacity:0},{
start: function() {
// do asynchronous stuff; e.g., `.load()`
$(this).load("inc-timeline/"+evn.target.id+".html", function() {
// stop `.fadeTo(400, 0)` animation,
// start animating to `opacity:1`
$(this).finish().fadeTo(400, 1, function() {
// do stuff
});
});
},
duration: 400
});
$("button").click(function() { // call `.load()` when `.fadeTo(400, 0)` starts $(".timeline").finish().animate({opacity:0},{ start: function() { var el = $(this); // do asynchronous stuff; eg, `.load()` $.Deferred(function(dfd) { setTimeout(function() { dfd.resolveWith(el) }, Math.floor(Math.random() * 3500)) }).promise().then(function() { // stop `.fadeTo(400, 0)` animation, // start animating to `opacity:1` $(this).finish().fadeTo(400, 1, function() { }); }); }, duration: 400 }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>click</button> <div class="timeline">abc</div>
將負載的持續時間更改為超過400毫秒又會如何呢?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.