Develop Reference

Wait for one animation to finish before starting another

I have a mouseenter animation on a footer and also a mouse leave animation that just slides it abit, the issue im having is if you mouse enter then mouseleave multiple times quickly the animations que and run over and over even if the element is no longer beign used.
How do I wait for the mouse over to run before it then recognises the mouse leave please.
Many thansk for any help
David
$(document).ready(function () {
$("footer").mouseenter(function () {
$("footer").animate({ bottom: '+=62px' }, 500);
});
$("footer").mouseleave(function () {
$("footer").animate({ bottom: '-=62px' }, 500);
});
});

Try adding stop() to your animate functions. It stops the currently-running animation on the selected element.
$("footer").mouseenter(function () {
$("footer").stop().animate({ bottom: '+=62px' }, 500);
});
$("footer").mouseleave(function () {
$("footer").stop().animate({ bottom: '-=62px' }, 500);
});

On first click animation works good, on second it skips some steps

For this animation I use velocity.js and here is the code
$(document).ready(function() {
$('.shrink').on('click', function() {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
$('.spread').on('click', function() {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
});
});
and the jsfiddle with full animation preview.
So, when you click on some column it opens and click again it closes. That is how it is supposed to work. But, the problem is if you now click again on the same column, it will open and close immediately, which is not the effect I want.
How can I fix this?
Btw, not sure why, but currently is not working in chrome, but it works in ff.

Learn about event delegation
simple rewrite of your code becomes
$(document).ready(function () {
$('body').on('click', '.spread', function () {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
$('body').on('click', '.shrink', function () {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
});
});
DEMO

folding menu with jquery not working

Hello I used to use this piece of code to fold and unfold the menu in my website with jquery 1.8.3 but after updating this to >1.10.2 it hides the menu automatically again. I think this is because it goes through all the code. How can I change this to work with the new update? ( sorry for my lack of javascript )
$(document).ready(function() {
$('#menu-button').toggle(function() {
$('#menu').animate({
marginTop: '+=10',
height: '100%',
opacity: 1
}, 300, function() {
// Animation complete.
});
}, function() {
$('#menu').animate({
marginTop: '-=10',
opacity: 0,
height: '0px'
}, 300, function() {
// Animation complete.
});
});
});
click here for a working example of how it is now.

Just rewrite it with toggleClass();
Here is working jsbin : http://jsbin.com/razeguma/4/edit

Javascript glow/pulsate effect to stop on click

I have the following Javascript to make a text link glow/pulsate continuously. This link reveals another section of the same page so I would like it to stop once the user has clicked on it.
<script type="text/javascript">
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}
pulsate();
});
</script>
So basically, I just need to know what I need to add here so that the effect stops once it has been clicked.
If the same link is clicked again, the revealed section of the page will hide - is it too much trouble to make the effect start again after a second click?
I look forward to an answer from you good people.
Scott.

Simply bind to the click event and call stop(). You should also ensure that the opacity has been restored to 1:
$(document).ready(function() {
function pulsate() {
$(".pulsate").animate({ opacity: 0.2 }, 1200, 'linear')
.animate({ opacity: 1 }, 1200, 'linear', pulsate)
.click(function() {
//Restore opacity to 1
$(this).animate({ opacity: 1 }, 1200, 'linear');
//Stop all animations
$(this).stop();
});
}
pulsate();
});
Here's a working jsFiddle.

The solution is pretty simple. Have your pulsate() function make sure that .pulsate doesn't have the class stop before doing its thing. If it does have that class, then the pulsate() function will simply animate the link back to full opacity, but not continue the pulsating.
James' example works as well, but I prefer my approach because his way binds the click event to .pulsate over and over again. This kind of thing may cause problems depending on what the rest of your page is doing.
Live example: http://jsfiddle.net/2f9ZU/
function pulsate() {
var pulser = $(".pulsate");
if(!pulser.hasClass('stop')){
pulser.animate({opacity: 0.2}, 1200, 'linear')
.animate({opacity: 1}, 1200, 'linear', pulsate);
}else{
pulser.animate({opacity:1},1200)
.removeClass('stop');
}
}
$(document).ready(function() {
pulsate();
$('a').click(function(){
$('.pulsate').addClass('stop');
});
});

jquery small error

i am very new at jquery and code, here i am trying to get the setTimeout event to be inside the .mouseout event but i'm not sure how to do that as i keep getting syntax error in my editor. Here's what i have:
jQuery(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout()
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
A small nuance, in this code the user mouses over a div, then another div bellow it slides down. Moving the mouse to the .slidedown div should keep it open until the mouse is removed. But will this code collapse the .slidedown div if the user doesn't mouse over .slidedown after .trigger but instead moves the mouse directly from .trigger to another area of page? I.e i need some kind of 'setTimeout' that is trigged only if the user doesn't move mouse over .slidedown after hovering over .trigger. Hope i make sense. Thanks for your help!

This line is the problem
$('.slidedown').mouseout()
It shoule be
$('.slidedown').mouseout( YOUR_CALLBACK_FUNCTION )
You should pass a callback function which will act as an event handler and inside that event handler you can call setTimeout() the way you have done it.
So the correct code would look like this
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here

Thanks T.J and Arnab, this works:
$(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
});
});
But the other thing i mentioned about moving the mouse over .trigger but then away (but not into .slidedown) doesn't work. The .slidedown just remains open. :) :( I think it will be very complex to get a .mouseout event that has a kind of 'allow' rule for one destination of the mouse.