Develop Reference

jQuery: don't repeat animation when mouse is still / don't safe animation queue / stop animation

This is more or less a basic jQuery-Question.
The following is my problem:
I have a mouseenter-function. so when I enter the specific container, an animation starts. the problem is, when i enter this container for example 10 times in a few seconds, then the animation is repeated and repeated… but i only want it one time… hope you understand.
here is an video to demonstrate my problem:
http://youtu.be/5Cb0qHKtl_c
Or look here:
http://jsfiddle.net/meNK5/
$('.project').mouseenter(function() {
$( this )
.find('.info').fadeIn(200);
$( this )
.find('div.image').fadeTo( "slow", 0.15 );
});
$('.project').mouseleave(function() {
$('.info').fadeOut();
$( this )
.find('div.image').fadeTo( "slow", 1 );
});
what do i have to do, to regulate the animation?

You should use jquery's stop to stop the previous animation before starting a new one:
http://jsfiddle.net/meNK5/1/
$( this ).find('.info').stop(true,true).fadeIn(200);

An easy way of doing it (maybe not the most proper way), is to set a variable on your mouseenter function, and disable it at the end of your animation. Something like (this is pseudo code):
var active = 0;
$('#myObject').mouseenter(function() {
if(active == 0) {
active = 1;
startAnimation();
}
}
function startAnimation(){
// start my animation
...
// end of animation
active = 0;
}

Use .one('mouseenter', myFunc) instead of .mouseenter(myFunc)
http://api.jquery.com/one/
EDIT: If you want to do the animation multiple times, but not have two animations overlap, recommend using .is(':animated');:
$('.project').mouseenter(function() {
if(! $(this).is(':animated')) {
// start a new animation ...
}
});
A bit more involved solution which could give you more control is the following: introduce two different states to your object, most easily accomplished by using a class with (.toggleClass()). jQuery does something similar under the hood for ':animated'.

How can I pause my infinitely looping animating divs on click using Jquery/javascript?

Hi I have 4 windows 8 style live tiles on my web page each of them are infinitely looping to animate sliding up and down. I can get this to work well using a method that calls itself. However I want to pause this animation once the user clicks on one of the tiles. Once a tile is clicked it expands to the full size of the page but the animation continues when I want it to stop. I have tried implementing the stop() function to no avail. I have tried stop(true, true); to no avail. I have tried putting in a "sleep" method that puts the animation delay rate very high(to a stop) and thus putting the animation "to sleep" but it is unreliable getting it to stop on the right slide for some reason. If the stop method does work it only briefly works and the tiles all become out of sync and break I have also tried a boolean check i.e. if clicked stop but still no luck. Does anyone have any suggestions? thanks.
Here is some sample code:
function tiles()
{
setTimeout(function(){alltiles(news1,news2);},4000);
this method gets called on startup and the tile starts animating via alltiles(); after 4 seconds.
This is where the animation gets done I have included a callback function so each animation
starts when the last one has completed. Then the alltiles(); method gets called again to infinitely loop the animation.
function alltiles(div1, div2){
$(div1).delay(delayRate).animate({top: "-100%"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div1).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "100%"},speed,easing,function(){
alltiles(div1, div2);});
Finally just a sample of where I am implementing the mouse down. I have tried unique ids also with no luck.
$('.tile,.tile2, .tile3, .tile4').mousedown(function(event) {
$('.tile,.tile2, .tile3, .tile4').stop();
$(this).addClass('selected');
$(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
$(this).delay(2000).animate({ width: "98%",height: "98%" }, 1000 );

If you're starting the whole thing with this:
alltiles(news1,news2);
which then proceeds to do animation operations on news1 and news2, then, you need to stop it with this:
$(news1).stop(true);
$(news2).stop(true);
Passing the true argument with .stop(true) clears the animation queue for that particular object so any queued up operations are stopped too.
To put it in your click handler:
$('.tile, .tile2, .tile3, .tile4').mousedown(function(event) {
$(news1).stop(true);
$(news2).stop(true);
$(this).addClass('selected');
$(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
$(this).delay(2000).animate({width: "98%", height: "98%"}, 1000 );
});

Say if you have a button with id="theStopButton". If a user clicks on it, it will stop ALL animations on the page with $.fx.off = true.
$('#theStopButton').click(function() {
$.fx.off = true;
});
http://api.jquery.com/jquery.fx.off/

Try adding the necessary boolean values
http://api.jquery.com/stop/
.stop( true, true )
OR
.stop(true)

Jquery scrollTo prevent queue

Ok simple question for scrollTo. I'm looking for a way to prevent the queuing of the scroll animations. I've tried to work in stop() but it doesn't seem to do the trick.. any Ideas? here's the code...
('#nav_hold li a').click(function(){
$currLoc = $(this).attr('href');
$newLoc = $currLoc.replace('#!','');
$newLoc = "#"+$newLoc;
$(window).scrollTo($newLoc, 1000);
});
here's the site FYI http://www.dudnyk.com/files/connector/

I've had the same problem, but I found the solution here http://usejquery.com/sites/contrast-rebellion
Just use the line
jQuery.scrollTo.window().queue([]).stop(); before any new scrollTo.

There is function clearQueue(). I think that should help.

.stop() Is for removing the currently running animation, to also clear to queue use .stop(true)
$('#about').click(function() {
$(this).stop(true);
$.scrollTo('#about', 1000);
});
From jQuery Docs (linked above):
If more than one animation method is called on the same element, the
later animations are placed in the effects queue for the element.
These animations will not begin until the first one completes. When
.stop() is called, the next animation in the queue begins immediately.
If the clearQueue parameter is provided with a value of true, then the
rest of the animations in the queue are removed and never run.

{ queue : false }
as the scrollTo option
but that's the default. doesn't the anchor click get you somewhere?

When you use $.scrollTo on any element it is actually scrolling(with animation) the document until the scroll reaches to the specified element. So I believe we should stop the animation on document. Try this
$('#about').click(function() {
$(window).stop();
$.scrollTo('#about', 1000);
});

jQuery delay doesn't work as expected

I have the following jQuery code
$("#dropdown").hover(function() {
$(this).stop(true,true).fadeTo('fast',1);
$("#options").stop(true,true).slideDown();
}, function() {
$(this).delay(1000).stop(true,true).fadeTo('fast',0.1);
$("#options").delay(1000).stop(true,true).slideUp();
}
);
What I expect to happen is when the mouse leaves #dropdown it will wait 1 second before continuing. This is not happening.
What I am trying to achieve, in case there is a better way, is to leave the drop down menu visible for a second or two after moving your mouse and I would also like to prevent the events from happening again to prevent artifacts and "funnies" if you were to move the mouse over and out from the div very quickly

The problem is .stop(). If you take that out it works:
http://jsfiddle.net/LZ8yt/

Your calls to stop aren't placed on the animation queue - they run immediately. I'm not sure whether you really need them in the "hover out" routine.
edit removed dumbness

You can always go lo-tech with setTimeout.
var dropDownElement = $(this);
setTimeout(function()
{
dropDownElement.fadeTo('fast', 0.1);
// Other Code
}, 1000);

Hide div after a few seconds

I was wondering, how in jquery am I able to hide a div after a few seconds? Like Gmail's messages for example.
I've tried my best but am unable to get it working.

This will hide the div after 1 second (1000 milliseconds).
setTimeout(function() {
$('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds
#mydiv{
width: 100px;
height: 100px;
background: #000;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>
If you just want to hide without fading, use hide().

You can try the .delay()
$(".formSentMsg").delay(3200).fadeOut(300);
call the div set the delay time in milliseconds and set the property you want to change, in this case I used .fadeOut() so it could be animated, but you can use .hide() as well.
http://api.jquery.com/delay/

jquery offers a variety of methods to hide the div in a timed manner that do not require setting up and later clearing or resetting interval timers or other event handlers. Here are a few examples.
Pure hide, one second delay
// hide in one second
$('#mydiv').delay(1000).hide(0);
Pure hide, no delay
// hide immediately
$('#mydiv').delay(0).hide(0);
Animated hide
// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500);
fade out
// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300);
Additionally, the methods can take a queue name or function as a second parameter (depending on method). Documentation for all the calls above and other related calls can be found here:
https://api.jquery.com/category/effects/

There's a really simple way to do this.
The problem is that .delay only effects animations, so what you need to do is make .hide() act like an animation by giving it a duration.
$("#whatever").delay().hide(1);
By giving it a nice short duration, it appears to be instant just like the regular .hide function.

$.fn.delay = function(time, callback){
// Empty function:
jQuery.fx.step.delay = function(){};
// Return meaningless animation, (will be added to queue)
return this.animate({delay:1}, time, callback);
}
From http://james.padolsey.com/javascript/jquery-delay-plugin/
(Allows chaining of methods)

Using the jQuery timer will also allow you to have a name associated with the timers that are attached to the object. So you could attach several timers to an object and stop any one of them.
$("#myid").oneTime(1000, "mytimer1" function() {
$("#something").hide();
}).oneTime(2000, "mytimer2" function() {
$("#somethingelse").show();
});
$("#myid").stopTime("mytimer2");
The eval function (and its relatives, Function, setTimeout, and setInterval) provide access to the JavaScript compiler. This is sometimes necessary, but in most cases it indicates the presence of extremely bad coding. The eval function is the most misused feature of JavaScript.
http://www.jslint.com/lint.html

Probably the easiest way is to use the timers plugin. http://plugins.jquery.com/project/timers and then call something like
$(this).oneTime(1000, function() {
$("#something").hide();
});

<script>
$(function() {
$(".hide-it").hide(7000);
});
</script>
<div id="hide-it">myDiv</div>

we can directly use
$('#selector').delay(5000).fadeOut('slow');