Develop Reference

unable to understand the logic of settimeout in this piece of code

I have to hide some of subsections on click on button , here is the code
$('#myButton').on('click', function (event){
event.preventDefault();
$('#panel').hide();
$('#header').hide();
setTimeout(function(){ $('#sub-section').attr('style','display:none;'); }, 100);
});
at the last statements if I remove function set timeout then display attribute to none is not set on #sub-section . I just came to know about , what is actual need of settimeout here. It should work without settimeout also.
If function hide is taking too much time to execute , I have tried
$('#panel').attr('style','display:none;');
$('#header').attr('style','display:none;');
$('#sub-section').attr('style','display:none;');
also but it is not working. at 3rd statement only.

In this case display: none will be applied to your element after 100 milliseconds. I think this is done because above you have called hide function 2 times and this function will work with animation which will take some time. So your hide function will finish his in approximately less or equal to 100 milliseconds than display: none will be applied

i hope you will find your answer here. and also change the timing value and observe the output then you will understand.
[http://jsfiddle.net/mxgtaLzw/2/]
Without Function :
[http://jsfiddle.net/mxgtaLzw/3/]

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

What determines the execution order of methods in jQuery chains?

HTML Code
<div id="foo">
<h1>foo</h1>
<p>Pellentesque habitant morbi tristique.</p>
</div>
<div id="bar">
<h1>bar</h1>
</div>
jQuery Code
$('#bar').click(function () {
$('#foo p').hide('slow').appendTo('#bar').show('slow');
})
Expected Result
When #bar is clicked
hide the p element in #foo
append p to #bar
show p which is now a child of #bar
Actual Result
append p to #bar
hide the p element in #foo
show p which is now a child of #bar
Questions
What determines the execution order of methods in jQuery chains?
How can I ensure that each event completes before the next starts?

To ensure you execute something AFTER an effect like hide or show, use a callback.
http://docs.jquery.com/Effects/show#speedcallback
To Add:
Vincent is right, the execution is actually
start hiding the p element in #foo
(SLOWLY)
append p to #bar (in a snap)
start showing p which is now a child of #bar (SLOWLY)
What you saw was the result of the effect
append p to #bar (executed)
hide the p element in #foo
(COMPLETED)
show p which is now a child of #bar
(COMPLETED)

The expected result is correct. The observed behaviour may be a result of hide('slow') which runs asynchronously. So it runs while the next action executes. So it appears as if p is appended to #bar first. You can try hide() without the slow to see if that makes a difference.

If you want to wait until each animation completes before doing the next step, use the animation callbacks detailed in the documentation:
$('#bar').click(function () {
$('#foo p').hide('slow', function(){
$(this).appendTo('#bar').show('slow');
});
});

show() and hide() are actually animation effects but when no arguments are passed they use an "instant" duration. However, due to the fact that they're implemented as animations, that means that they don't execute synchronously with the function chain. Thus, what you really should be using is a callback off of the hide() call to trigger a callback function which calls append() and then show().
http://docs.jquery.com/Effects/show
http://docs.jquery.com/Effects/hide

Hide is asynchronous. If you want to wait for it to finish, you need to put all the code you want to run after it into a callback function that you pass to hide as a parameter.

Pretty sure it's executed in the order you invoke it, it probably starts the hide part and a split second later it's appended to that other element but the animation part has already begun, it takes longer than a millisecond because you set it to 'slow' and it's jumping in opacity from 1 to 0, going from say 1 to .9 to .8 in milliseconds.
$.fn.hide = function() { alert('hiding'); return this; };
$.fn.appendTo = function() { alert('appending To') }
$('body').hide().appendTo('html')

You have to use callback if you want to queue the other methods run after the show hide thing like "Sixten Otto" has said. The animation of show hide will not wait for append method to execute. It starts a separate thread with setInterval while in the meantime, other code is invoked. So the result you got is not unexpected.

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