Develop Reference

run animation then remove element

I am tring to run a simple animation then remove the div since it lies over some buttons so you can not click them after the animation.
JS
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 );
I tried doing this to remove the element after the animation but it removes it before.
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 ).remove();

Remove in animate function's callback:
$(".intro").eq(0).delay(800).animate({opacity: 0}, 1000, function() {
$(this).remove()
});
Alternatively, add complete function in option object:
$(".intro").eq(0).delay(800).animate({opacity: 0}, {duration: 1000, complete: function() {$(this).remove();}});
You can add more options to it, easing for example. Check the API doc

You can use complete callback to call once the animation is complete :
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() {
$(this).remove();
});
Working Demo

Use the complete callback
$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() { $(this).remove(); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="intro">Hello</div>

Delay jQuery fadeIn due to unwanted behavior

How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});

a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});

Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();

Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/

Starting jquery fadeToggle hidden

I want to use fadeToggle to fade in and out some images automatically. It's working, but all the images start 'faded in', and I would like them to start invisible, so that they appear one by one. Thanks in advance!
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeToggle(duration, function () {
run_animation($element, delay, duration);
});
}
run_animation($('.pointer1'), 2000, 1000);
run_animation($('.pointer2'), 2500, 1000);
run_animation($('.pointer3'), 3000, 1000);
run_animation($('.pointer4'), 3500, 1000);
run_animation($('.pointer5'), 4000, 1000);

Did you try by hiding images using CSS? Try display:none and if required you can call animation after show().

Stop animation immediately jQuery

I have an animation every one second and I have a button Stop, when I click to the button the animation is stopped but it continues after. There is not another way to remove the animation ?
This is my code.
$(document).ready(function() {
setInterval(function() {
$("#myImg").animate({top: '50%',left: '50%',width: '174px',height: '174px',padding: '10px'}, 500);
$("#myImg").animate({ marginTop: '0',marginLeft: '0',top: '0',left: '0',width: '70px',height: '70px',padding: '5px'}, 600);
},1000);
});
$("#stop").click(function(){
$("#myImg").stop();
});
​
Thank you

jsFiddle demo
-You don't need setInterval, you can use the .animate() callback to loop your anim function.
-Nest your animate functions
-Use the .stop() method on your first .animate() iteration just to prevent animation buildups and clear some animation memory ;)
$(document).ready(function() {
function anim(){
$("#myImg").stop().animate({top: '50%',left: '50%',width: '174px',height: '174px',padding: '10px'}, 500, function(){
$(this).animate({ marginTop: '0',marginLeft: '0',top: '0',left: '0',width: '70px',height: '70px',padding: '5px'}, 600, anim); // <-- the 'anim' callback
}); // SCROLL THERE --> TO FIND THE CALLBACK :D -->
}
anim(); // run!!
$("#stop").click(function(){
$("#myImg").stop();
});
});

The setInterval() call is continuously adding in new calls to .animate() to your elements. That means that you succeed in stopping the animation, then the setInterval() calls it again, making the animation run again.
Why do you have this on setInterval()?
In any case, you'll have to cancel the schedule as well. You can do that by doing something similar to the following:
var schedule = setInterval(fn, 1000);
clearInterval(schedule);

Delay slideDown()/slideUp() - jquery dropdown

I am creating I am creating a drop down which I want to delay about 250 ms so that it's not triggered when someone quickly scrolls across the button.
Here's my current code. I tried using the delay() method but it's not going well.
$(".deltaDrop").hover(function(){
$('.deltaDrop ul').stop(false,true).slideDown(250);
$('.delta').css('background-position','-61px -70px');
},function(){
$('.deltaDrop ul').stop(false,true).slideUp(450);
$('.delta').css('background-position','-61px 0');
});
Thanks

var timer;
timer = setTimeout(function () {
-- Your code goes here!
}, 250);
Then you can use the clearTimeout() function like this.
clearTimeout(timer);

This should work.
$(".deltaDrop").hover(function(){
$('.deltaDrop ul').stop(false,true).hide(1).delay(250).slideDown();
$('.delta').css('background-position','-61px -70px');
},function(){
$('.deltaDrop ul').stop(false,true).show(1).delay(450).slideUp();
$('.delta').css('background-position','-61px 0');
});
.delay only works when you're dealing with the animation queue. .hide() and .show() without arguments don't interact with the animation queue. By adding the .hide(1) and .show(1) before the .delay() makes the slide animations wait on the queue.

setTimeout(function() {
$('.deltaDrop ul').slideDown()
}, 5000);

Untested, unrefactored:
$(".deltaDrop")
.hover(
function()
{
var timeout = $(this).data('deltadrop-timeout');
if(!timeout)
{
timeout =
setTimeout(
function()
{
$('.deltaDrop ul').stop(false,true).slideDown(250);
$('.delta').css('background-position','-61px -70px');
$('.deltaDrop').data('deltadrop-timeout', false);
},
250
);
$(this).data('deltadrop-timeout', timeout);
}
},
function()
{
var timeout = $(this).data('deltadrop-timeout');
if(!!timeout)
{
clearTimeout(timeout);
$('.deltaDrop').data('deltadrop-timeout', false);
}
else
{
$('.deltaDrop ul').stop(false,true).slideUp(450);
$('.delta').css('background-position','-61px 0');
}
}
);