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);
});

jQuery animate back when clicked anywhere on the page

<script type="text/javascript">
$(function (){
$(".links").click(function(){
$('.slider').stop(true,false).animate({right: "0" }, 800, 'easeOutQuint' ); },
function(){
$(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
});
</script>
I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.

well, here you go
$(document).click(function(e){
e.preventDefault();
if($(e.target).closest("your_slider_selector").length) return;
//here you can do what you want
});

Bind click on all document, stop current animation, run new animation.
$(document).click(function () {
$('.slider').stop(true).animate({right: -200}, 500);
});

Store the CSS value in a variable before you animate the slider:
var right = $('.slider').css("right");
And then you can just use the variable:
$('.slider').stop(true).animate({right: right}, 800);
Here an example: http://jsfiddle.net/ctdjkrLx/2/

javascript animate div 100px left then 100px right?

can someone please help i am trying to animate a div so that it moves 100px to the left and then returns back to its original position/so moves back over to the right by 100px.
i want it to do this 5 times before stoping the animation.
can someone please show me how to get this to work thanks.
<script>
function loop() {
$('.sign_up').animate({right:'+=100px'}, 1000, function() {
$(this).animate({left:'-=100px'}, 1000, function() {
loop();
});
});
}
$(function() {
loop();
});
</script>

You can use a counter to determine when to stop looping. For example:
<script type="text/javascript">
var loopCount = 0;
function loop() {
$('.sign_up').animate({ left: '-=100px' }, 1000, function () {
$(this).animate({ left: '+=100px' }, 1000, function () {
loopCount++;
if (loopCount < 5)
loop();
});
});
}
$(function () {
loop();
});
</script>
I also switched the first animate statement to animate to the left using the left css property instead of right. This code worked for for me when I declared the sign_up div as follows:
<div class="sign_up" style="position:absolute;top:300px;left:300px;width:200px;height:200px;background:Green;">
Hello!
</div>
UPDATE
Here's a working jsfiddle: http://jsfiddle.net/peFVT/

Animate and image up and down in jQuery

I'm trying to animate and image up and then down with jQuery.
It should behave like this:
When the page loads it shows 50% of the image. If someone clicks on the image it then animates the div up the page. If the user click again it moves back down the page.
html
<div id="slidebottom" class="slide">
<div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
</div>
jQuery
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
});
});
How can I reverse the animation after click two? At the moment every time I click, the container moves up.

You can try using the .toggle() method, which takes two functions and alternates between executing each one of them on click:
$(document).ready(function(){
$('.try').toggle(function() {
$(".inner").animate({top: '-=100px'}, 2000);
}, function() {
$(".inner").animate({top: '+=100px'}, 2000);
});
});
However, I personally would use a class and CSS3 Transitions.

Try this example. Also note that in order to use the top css property you should either position: relatve; or position: absolute the .inner div.
var clicked = false
$('.try').click(function () {
if (clicked == true) {
$(".inner").animate({
top: '0px'
}, 2000);
clicked = false;
} else {
$(".inner").animate({
top: '-100px'
}, 2000);
clicked = true;
}
});​

Just put another code line underneath the first and it will animate them in order
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
$(".inner").animate({
top: '+=100px'
}, 2000);
});
});

I'm using the jQuery .scroll() function, why can't I override its effects with another function?

I'm using the jQuery .scroll() function to make a certain element fade to 0.2 opacity. Since there is no native "scrollstop" indicator, I decided to make the element fade back to 1.0 opacity on hover. However, it doesn't work.
Here's my code:
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(
function() {
$(this).animate({ opacity: 1 }, 500);
}, function() {
$(this).animate({ opacity: 1 }, 500); // just to be safe?
}
);
});
When I scroll, the #navlist element fades, but when you hover over it nothing happens. But if you refresh the page when you're half way down, the element automatically fades as soon as you refresh, before I've scrolled, and if you try to hover to fade it back in, nothing happens.
Any thoughts?

try to stop animation first
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").stop().animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
},
function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
}
);

The problem is that the scroll event, gets called multiple times during a single scroll (10-20 per a single mouse wheel scroll), so #navlist gets a lot of animate events of 2 seconds.
I am not exactly sure what's going on with jQuery, but when you hover it, even though the opacity: 1 animations run, they end up running the queued #navlist animations.
I solved the problem using a sort of flag, I bet you can find something more efficient.
$(document).ready(function(){
var isAnimationBusy = false;
$(window).scroll(function(){
if(isAnimationBusy) return;
isAnimationBusy = true;
$("#navlist").animate(
{ opacity: 0.2 }, 2000,
function(){ isAnimationBusy = false; }
);
});
$("#navlist").hover(
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
},
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
}
);
});
Edit: The animation stop will solve the problem, I still believe you should control how many times you call the animate event. There could be a performance hit.