jQuery的排队与不同元素的动画问题
问题描述:
大家好我与动画链接我的情况是一个问题:jQuery的排队与不同元素的动画问题
HTML
...
<div id="content" class="home-layout clearfix">
<section class="home-related">
...
</section>
<section class="search">
<div class="left">
<div class="panel">
...
</div>
</div>
<div class="right">
<a class="someclass" href="#">CLICK</a>
</div>
</section>
</div>
...
JS
...
setupPanel : function() {
var $container = $("#content"),
$toHide = $("#content section.home-related"),
$toShow = $("#content div.left"),
$toShowContent = $('#content div.left div.panel'),
widthOpen = '602px',
positionOpen = '-600px',
widthClose = '30px',
positionClose = '0',
durationSlide = 300,
durationFade = 300;
if(MyApp.vars.searchAperto == false){
MyApp.vars.searchAperto = true;
//ANIMATION ONE
$toHide.fadeOut(durationFade, function(){
$toShow.animate({
width: widthOpen,
left: positionOpen
}, durationSlide, function(){
$toShowContent.fadeIn(durationFade);
});
});
}else{
MyApp.vars.searchAperto = false;
//ANIMATION TWO
$toShowContent.fadeOut(durationFade, function(){
$toShow.animate({
width: widthClose,
left: positionClose
}, durationSlide, function(){
$toHide.fadeIn(durationFade);
});
});
}
},
...
一切工作。如果我点击“点击”,“动画ONE”正确执行;在动画结束时,如果我再次点击“CLICK”“ANIMATION TWO”正确执行;如果我在点击“点击”时动画一会儿(或者动画二会去),一切都会搞砸......我想要的行为是,如果点击“点击”而动画是继续,动画继续走下去,直到他结束,然后,其他动画开始,如果我再次点击相同的行为,等等...基本上我想有一个队列:anim one,anim two,anim一个等等...取决于我的点击次数。
我尝试使用应用于$容器的.queue()和.dequeue()方法,但没有成功;我不能告诉在点击我的应用程序应该把动画在队列中,不履行...
请帮助我,我变得疯狂:d
答
我看到你拿了使用.queue()
的方法在$container
这实际上是一个非常好的解决这个问题的方法。希望你只是有问题understanding .queue()
和该代码会为你工作:
$container.queue(function(next) {
// I moved this if to inside of the queue, this way
// even if you click 3 times, it will hide/show/hide
if(MyApp.vars.searchAperto == false){
MyApp.vars.searchAperto = true;
//ANIMATION ONE
$toHide.fadeOut(durationFade, function(){
$toShow.animate({
width: widthOpen,
left: positionOpen
}, durationSlide, function(){
// note, the final callback on fadeIn will call the "next"
// function in the "queue"
$toShowContent.fadeIn(durationFade, next);
});
});
});
}else{
MyApp.vars.searchAperto = false;
//ANIMATION TWO
$toShowContent.fadeOut(durationFade, function(){
$toShow.animate({
width: widthClose,
left: positionClose
}, durationSlide, function(){
// again call next from callback of last anim in the chain
$toHide.fadeIn(durationFade, next);
});
});
}
});
jQuery的使用将自动启动,这样你就不需要惹.dequeue()
在所有的默认队列。队列函数的第一个参数将为next
-将使下一个队列函数出列的函数,因此您可以使用next()
将队列推进到下一个步骤。