Develop Reference

jQuery animation in order delay

Hey all I am trying to call out animations in order. Currently the code below seems to call them all out at the same time even with the delay function (which doesn't seem to be working at all...)
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })
What all would I need to do in order to have the execute one at a time?

If you want the animations to happen sequentially you should nest each animation in the complete callback of the prior:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' });
})
})
})
.animate reference: http://api.jquery.com/animate/

You either need to send the next one as a callback, or use incremental delays.
Callbacks:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice2").delay(500).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice3").delay(500).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
$(".overlayChoice4").delay(500).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' }, function(){
});
});
});
});
Incremental delays:
$(".overlayChoice1").delay(500).animate({
top: '-15px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice2").delay(2700).animate({
top: '-45px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice3").delay(4900).animate({
top: '-75px' }, { duration: 1700, easing: 'easeOutElastic' })
$(".overlayChoice4").delay(7100).animate({
top: '-105px' }, { duration: 1700, easing: 'easeOutElastic' })

$(".overlayChoice1").animate({ top: '-15px' }, 1700, "easeOutElastic", function() {
// Animation overlayChoice1 complete.
$(".overlayChoice2").animate({ top: '-45px' }, 1700, "easeOutElastic", function() {
// Animation overlayChoice2 complete.
.....
} })
});

Personally, I'd use a much more DRY implementation that doesn't repeat so much code and triggers the next animation based on the completion callback of the previous one:
function runAnimations() {
var cntr = 1, top = -15;
function next() {
if (cntr <= 4) {
$(".overlayChoice" + cntr).delay(500)
.animate({top:top+'px'}, {duration:1700, easing:'easeOutElastic'}, next);
++cntr;
top -= 30;
}
}
next();
}

jQuery adding easing breaks animations that come after. Syntax Error?

I'm adding animations to a website, and having a bit of a hard time adding easing. I can get the entire animation sequence to run correctly, but when I try to define the easing, the animations break on all the animations that come after the first element where I define easing.
The basic animation sequence is the bottom half the page fades in and flies up to meet the top half. Then three buttons fade in and fly up sequentially to their designated locations. It looks alright, but it would look a lot better with easOutBounce.
I have now been wrestling with this for too long, trying to figure out why adding the easing breaks my code. I'm guessing my syntax is incorrect.
THIS code works on all elements:
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 } );
} );
} );
});
BUT this code doesn't. When I run this code, it does add the easing and it still works on the .front-page-content-wrap, and the #box-button-1, but then it stops.
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
} );
} );
});
Any ideas?
PS, I'm using jQuery as the variable identifier instead of $, because I'm working in wordpress which runs in no-conflict mode.

Try this syntax: .animate( properties, options )
jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
}});
}});
});
http://jsfiddle.net/mblase75/42BjC/

location.reload() not working after jQuery animations

With this code, none of the animations happen - it skips straight to the location.reload(). However, if I remove location.reload(), the animations work fine.
How can I have both?
$( "#welcome" ).animate({
opacity: 0,
}, 100, function() {
})
$( "#signup_link" ).animate({
opacity: 0,
}, 200, function() {
})
$( "#forgotten" ).animate({
opacity: 0,
}, 200, function() {
})
$('.login-container').animate({ opacity: 0, top: "-100px" }, 'fast').delay(3000);
location.reload();

Perhaps something like this: I'm assuming you want the animations and reload to fire as you have them sitting in your original post. jsfiddle: http://jsfiddle.net/Pv4RV/2/
note: I commented out the 'reload' part as that will then just generate a loop on the page.
$.when(
function(){
$( "#welcome" ).animate({opacity: 0,}, 100, function() {});
$( "#signup_link" ).animate({opacity: 0,}, 200, function() {});
$( "#forgotten" ).animate({opacity: 0,}, 200, function() {});
}()
).then(
$('.login-container').animate({ opacity: 0, top: "-100px" }, 'fast').delay(3000)
).then(
location.reload()
)

Mootools jquery's blockUI equivalent

I am searching for jquery's plugin blockUI functionality for mootools. Do You know some plugin or simple way to block browser for a given time by mootools ?

Here's some code to get you started. http://jsfiddle.net/5BCPS/
taken it out of my plugin here: https://github.com/DimitarChristoff/Modal/blob/master/Source/js/Modal.js
(function() {
this.Modal = {};
Element.implement({
diffuse: function(position){
return this.setStyles({
position: position || 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: '100%',
width: '100%'
});
}
});
Modal.Overlay = new Class({
Implements: [Events, Options],
options: {
zIndex: 900000,
opacity: .3,
backgroundColor: '#555',
fx: {
duration: 300
}
},
initialize: function(container, options){
this.setOptions(options);
this.container = document.id(container);
var self = this;
this.element = new Element('div', {
'class': 'overlay',
styles: {
display: 'none',
opacity: 0,
zIndex: this.options.zIndex,
backgroundColor: this.options.backgroundColor
},
events: {
click: function() {
self.fireEvent("overlayClick");
}
},
tween: this.options.fx
}).diffuse('fixed').inject(this.container);
return this;
},
show: function(){
this.element.setStyle("display", "block").fade(this.options.opacity);
return this.fireEvent("show");
},
hide: function(){
this.element.fade(this.options.opacity).get("tween").chain(function() {
this.element.setStyle("display", "none");
});
return this.fireEvent("hide");
}
});
})();
var modal = new Modal.Overlay(document.body, {
hideAfter: 5,
onHide: function() {
// do something.
}
}).show();
modal.hide.delay(3000, modal);
all you need is what you display on top / counter. thats just plain js.

jQuery multiple slide effects bug after few minutes leaving a page

I am having a bug with my custom slider script. When I am on the page everything goes smoothly, but when I open another tab and browse for a minute or so, and than comeback to my page my script goes crazy... Script is very straightforward.
Here is Jsfiddle - There are no images in the slider and that is why it does not look nice as it should..
function show12(evt){
$('#number_1').unbind();
$('#number_2').unbind();
// First slide
$('#number_1').css({
position: 'absolute',
top: '9px',
left: '10px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_1').css({
position: 'absolute',
top: '9px',
left: '47px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
// Second slide
$('#number_2').css({
position: 'absolute',
top: '9px',
left: '445px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_2').css({
position: 'absolute',
top: '9px',
left: '481px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
// Third slide
$('#number_3').css({
position: 'absolute',
top: '9px',
left: '879px'
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_3').css({
display: 'none'
});
// Forth slide
$('#number_4').css({
position: 'absolute',
top: '9px',
left: '917px'
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_4').css({
display: 'none'
});
$('#number_1, #number_2').hover(
function(){window.clearInterval(timer); i=1;}
);
$('#number_1, #number_2').mouseout(
function(){
$(this).unbind();
timer = window.setInterval(function(){slideLogos();}, 4000); i=1;
}
);
$('#number_3').hover(function(){$(this).unbind(); i++; show34();});
$('#number_4').hover(function(){$(this).unbind(); i++; show34();});
}
function show34(){
$('#number_3').unbind();
$('#number_4').unbind();
// First slide
$('#number_1').css({
position: 'absolute',
top: '9px',
left: '10px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_1').css({
display: 'none'
});
// Second slide
$('#number_2').css({
position: 'absolute',
top: '9px',
left: '48px',
}).effect('slide', {
direction: 'left',
mode: 'show'
}, 'slow');
$('#slide_2').css({
display: 'none'
});
// Third slide
$('#number_3').css({
position: 'absolute',
top: '9px',
left: '86px'
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
$('#slide_3').css({
display: 'inline-block',
position: 'absolute',
top: '9px',
left: '123px',
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
// Forth slide
$('#number_4').css({
position: 'absolute',
top: '9px',
left: '521px'
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
$('#slide_4').css({
position: 'absolute',
top: '9px',
left: '558px',
}).effect('slide', {
direction: 'right',
mode: 'show'
}, 'slow');
$('#number_3, #number_4').hover(
function(){window.clearInterval(timer); i=0;}
);
$('#number_3, #number_4').mouseout(
function(){
$(this).unbind();
timer = window.setInterval(function(){slideLogos();}, 4000); i=0;
}
);
$('#number_1').hover(function(){$(this).unbind(); i++; show12();});
$('#number_2').hover(function(){$(this).unbind(); i++; show12();});
}
function slideLogos(){
switch(i%2){
case 0:
show12();
break;
case 1:
show34();
break;
}
i++;
}
var i = 1;
var timer;
$('document').ready(function(){
show12();
timer = setInterval(function(){slideLogos();}, 4000);
});
Number_n - is number always shown in slider, Slide_n - is a slide that is being shown/hidden, sorry about that :)

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop.
The documentation suggests using the animation callbacks or the jQuery .queue() function on the element.
jQuery Queue()
Also this answer on queues is really interesting:
What are queues in jQuery?

I once ran into this same problem. I wouldn't say the script was going crazy as much as the animation appeared to be cached until I returned to the page. I don't know if this happens for you, but for me the sliding eventually slowed back down to the normal speed. I also noticed that the same thing happened across all browsers. So I figured it had to be caused by jQuery. Sure enough the problem disappeared by reverting to an older version of jQuery (1.5 instead of 1.6, if I remember correctly).