[英]Reverse animation on a second click
我有單擊的子菜單元素,滑出然后展開以填充一個空間。 在第二次單擊時,我希望動畫在滑入之前反轉,但是我的jquery知識不足以實現此目的。 有人可以幫忙嗎?
我的js:
$('.box').click(function(){
var flag = $(this).data('flag');
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')});
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')});
$(this).data('flag', !flag)
});
元素的動畫在上一個元素完成后運行,因此此刻左幻燈片將始終運行,並且在完成后,垂直動畫會開始播放。
當flag
為true時,您希望垂直動畫首先運行。 因此,您需要先執行垂直動畫。
然后,另一個問題是您沒有在垂直動畫中對.tab2
進行動畫處理,因此它開始收縮得太早並且看起來很奇怪。 您可以通過在垂直動畫期間對其設置0px
動畫來解決此問題,因此它將等待直到正確的收縮時間:
$('.box').click(function(){ var flag = $(this).data('flag'); if(flag) { $('.tab1').animate({top: '+=50px'}); $('.tab3').animate({top: '-=50px'}); $('.tab2').animate({top: '+=0px'}); } $('.tab1, .tab2, .tab3').toggle("slide", { direction: "left"}, 500); if(!flag) { $('.tab1').animate({top: '-=50px'}); $('.tab3').animate({top: '+=50px'}); } $(this).data('flag', !flag) });
.square{ margin-left:100px; } .box{ position:relative; width:150px; height:150px; background-color:transparent; color:#fff; text-align:center; } .tab4{ position:absolute; right:10px; top:50px; width:70px; height:40px; background-color:grey; } .tab{ width:70px; height:40px; background-color:grey; display:none; } .tab1{ position:absolute; right:-70px; top:50px; } .tab2{ position:absolute; right:-70px; top:50px; } .tab3{ position:absolute; right:-70px; top:50px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <div class="square"> <div class="box"> <div class="tab4">CLICK</div> <div class="tab1 tab"></div> <div class="tab2 tab"></div> <div class="tab3 tab"></div> </div> </div>
我已經更新了您的Jsfiddle:
http://jsfiddle.net/VDesign/k52c9h12/5/
JS代碼
$('.box').click(function(){
if($(this).hasClass('open'))
{
$('.tab1').animate({top: '-=50px'});
// add callback function to wait untill tab1 and 3 are back to 0
$('.tab3').animate({top: '+=50px'}, function() {
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
});
$(this).removeClass('open');
} else {
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
$('.tab1').animate({top: '+=50px'});
$('.tab3').animate({top: '-=50px'});
$(this).addClass('open');
}
});
這只是訂購問題。 試試看:
function slide(){
$('.tab1').toggle("slide", { direction: "left"}, 500);
$('.tab2').toggle("slide", { direction: "left" }, 500);
$('.tab3').toggle("slide", { direction: "left" }, 500);
}
function expand(flag){
$('.tab1').animate({top: (flag ? '+=50px' : '-=50px')}, 500);
$('.tab3').animate({top: (flag ? '-=50px' : '+=50px')}, 500);
}
$('.box').click(function(){
var flag = ($(this).data('flag')!=undefined)?$(this).data('flag'):true;
if(flag){
slide();
expand(flag);
}
else{
expand(flag);
setTimeout(slide, 500);
}
$(this).data('flag', !flag)
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.