Develop Reference

jQuery Isotope queue shuffle/randomize animation

I would like to set the jQuery Isotope shuffle method to to perform an animated shuffle of the loaded DOM elements every 30 seconds that someone is on the page with the plugin loaded.
I have had success tying the animation to a .hover() event, but I cannot seem to get it to fire when I use setInterval() or .queue(). I want the animation to fire regardless of user interaction/input.
var iso_shuffle = function() {
$('#isotope').isotope('shuffle');
}
setInterval(iso_shuffle(), 2500);
Why does the previous code not trigger the randomization, yet this does:
$('#isotope').hover(function() {
iso_shuffle()
});
Cheers

iso_shuffle() calls the function immediately. The function returns nothing. So your setInterval is actually doing the equivalent of:
setInterval(undefined, 2500);
You want to use the function name as the callback for setInterval:
setInterval(iso_shuffle, 2500);

You need to pass the function itself, not its return value:
setInterval(iso_shuffle, 2500);

How to delay an event in jQuery?

In jQuery can you do something after you press a button and the timer starts to go from 3 seconds down to 0?
Like you have a button. You press it. 3 Seconds go by and bam.. an event fires.

The delay() function (doc) :
Description: Set a timer to delay execution of subsequent items in the queue.
For your example:
$("button").click(function() {
$("[element]").delay(3000).fadeOut("slow");
});

you can use .delay() refer this

You can use the .delay()-function.
They have a nice example in the documentation about this, which fits exactly to your question.
$("button").click(function() {
$("yourelement").delay(3000).fadeIn(400);
});

fadeout function along with slidetoggle function

When I submit my form, the last function I have is:
$("#message").show().delay(5000).fadeOut();
This will show my thank you message for 5 seconds, and then fade the "message" div out.
I then tried adding this function below it:
$("#slide_panel").slideToggle("slow");
because I want the form (which is inside the #slide_panel div) to close / slide up AFTER the 5 second delay.... but when I add this function, its almost like the 5 second delay doesn't exist and the success message shows for about half a second and then the whole contact form dissapears as its supposed to.
What is wrong with my code?
$("#message").show().delay(5000).fadeOut();
$("#slide_panel").slideToggle("slow");

delay function applies only to animation queue. you can use the following code by passing a call back function to fadeOut()
$("#message").show().delay(5000).fadeOut('fast', function(){
$("#slide_panel").slideToggle("slow");
});
Now the slideToggle will run once the animation is completed.

You can update the code to the following ...
$("#message").show().delay(5000).fadeOut(function(){
$("#slide_panel").slideToggle("slow");
});
That is, add the slideToggle of SlidePanel in the message callback. For more ideas, check http://jsfiddle.net/sf2Nr/1/

This has to do with the asynchronous behavior of the animation functions in jQuery.
In order to activate the slideToggle after the fadeOut delay, you must call it from the fadeOut's callback function, i.e.:
$("#message").show().delay(5000).fadeOut(0, function() {
$("#slide_panel").slideToggle("slow");
});

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

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