Hi everybody i have a problem with chaining animations my situation is:
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,
开发者_Go百科left: positionClose
}, durationSlide, function(){
$toHide.fadeIn(durationFade);
});
});
}
},
...
Everything is working. If i click on the "CLICK", "ANIMATION ONE" is executed correctly; at the end of the animation if i click again on the "CLICK" "ANIMATION TWO" is executed correctly; if i click on the "CLICK" while animation one is going (or while animation two is going) everything mess up.... the behavior that i would like to have is that if i click on the "CLICK" while an animation is going, the animation continue to go until his end, and after, the other animation start to go and if i click again the same behavior and so on... basically i would like to have a queue: anim one, anim two, anim one, etc... depending from my clicks.
I tried using the .queue() and .dequeue() methods applied to $container but without success; i cannot tell that on the click my app should put the animation in the queue and not execute it...
please help me i'm getting crazy :D
I see you took an approach of using .queue()
on $container
which is actually a really good solution to this problem. Hopefully you were just having problems understanding .queue()
and this code will work for you:
$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);
});
});
}
});
The default queue used in jQuery will auto-start, so you don't need to mess with .dequeue()
at all. The first argument to a queue function is going to be next
- a function that will dequeue the next queue function, so you can use next()
to advance the queue to its next step.
精彩评论