Develop Reference

Delaying Jquery CSS Animation using mousemove

I've been trying to put 10 seconds delay on this jquery css animation which is dependent on mousemove. I've tried unsuccesfully utilizing both .delay and .setInterval right before like so:
$(document).delay(10000).ready(function ()
However, they don't seem to be working for me. Its possible that I put it in the wrong place. I have listed below a the jsfiddle link with the code. If someone can help me out would be amazing.
JSFiddle: https://jsfiddle.net/oekhedr/eeh950b7/39/#&togetherjs=4Bsp9CVtlB
Thank you so much

You can add a (plain JavaScript) setTimeout in your mousemove event, like so:
setTimeout(function() {
// do something here, but it will only start after 10 seconds have passed
},10000);
.delay() only works with certain jQuery effects. Here is a fiddle using your code: https://jsfiddle.net/eeh950b7/42/

Why shouldn't I use delay? [duplicate]

According to jQuery document on .delay(),
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Could someone please expand on this? When is it more appropriate to use .delay(), and when is it better to use .setTimeout()?

I think what you posted explains itself really.
Use .delay() for jQuery effects including animations.
setTimeout() is best used for everything else. For example when you need to trigger an event at a certain elapsed time.

As far as I understand, .delay() is meant specifically for adding a delay between methods in a given jQuery queue. For example, if you wanted to fade an image into view during the span of 1 second, have it visible for 5 seconds, and then spend another second to fade it out of view again, you could do the following:
$('#image').fadeIn(1000).delay(5000).fadeOut(1000);
In this instance, .delay() is more intuitive to use since it is specifically meant for delaying events in a given jQuery queue. setImeout(), on the other hand, is a native JavaScript method that isn't intended explicitly for a queue line. If you wanted an alert box to pop up 1 second after clicking on a button, you could do the following:
function delayAlert() {
var x = setTimeout("alert('5 seconds later!')", 5000);
}
<input type="submit" value="Delay!" onclick="delayAlert();" />

You can use delay with animations, for example:
$('.message').delay(5000).fadeOut();
You can also use timeOut to delay the start of animations, for example:
window.setTimeout(function(){
$('.message').fadeOut();
}, 5000);
As you see, it's easier to use delay than setTimeout with animations.
You can delay pretty much anything with setTimeout, but you can only delay animations with delay. Methods that aren't animations are not affected by delay, so this would not wait a while before hiding the element, it would hide it immediately:
$('.message').delay(5000).hide();

.delay() is mostly used for chaining together animation effects with pauses in between.
As the docs mention, there is no way to cancel the delay. In the case where you may want to cancel the delay, a setTimeout() should be used instead so you can cancel it with clearTimeout()

Another side effect of delay(): it seems to disable the ability to hide (or fadeOut, etc) the objecting being delayed, until the delay is over.
For example, I set up the following code (perhaps a stackoverflow developer will recognize the css names....) to hide a 'div':
$j(document).ready(function(){
var $messageDiv = $j("<div>").addClass('fading_message')
.text("my alert message here").hide();
var $closeSpan = $j("<span>").addClass('notify_close').text("x");
$closeSpan.click(function() {$j(this).parent().slideUp(400);});
$messageDiv.append($closeSpan);
$j('.content_wrapper_div').prepend($messageDiv);
$messageDiv.fadeTo(500, .9).delay(5000).fadeTo(800,0);
});
Clicking the "x" that's in the span (that's in the 'div') did fire off the click function (I tested with an alert in there), but the div didn't slideUp as directed. However, If I replace the last line with this:
$messageDiv.fadeTo(500, .9);
..then it did work - when I clicked the "x", the surrounding div slideUp and and away. It seems as if the background running of the "delay()" function on the $messageDiv "locked" that object, so that a separate mechanism trying to close it couldn't do so until the delay was done.

jQuery delay between each toggleclass

I have made a (rather complicated) solution where I have 4 menu items pop in/out from the side and I make that happen by toggling a class.
$('.menuitem').toggleClass('show');
It works great but the client now wants it to "slide out". I figured that I can make him happy if I can create a delay between each toggle, but I cant find a good way to do it. In practice I want each menu item to toggleClass but with a delay of maybe 250ms before next toggleClass.
Edited - Apparently the delay function wont work with toggle, only with animations.

Consider this following code:
$('.menuitem').each(function(i) {
var elm=$(this);
setTimeout(function() {
elm.toggleClass('show');
}, i * 250);
});
See it in action, in this demo i have hiding diving one by one and delay is 1000 ms.

What about:
$('.menuitem').toggleClass('show').delay(1000).toggleClass('hide');
See jQuery's delay() function for further reference.

I would do the $('.menuitem').toggleClass('show') in a separate event.
For instance <button onmousedown="$('.menuitem').toggleClass('show');" onclick="myfunc();">Fast Toggle</button>
If you toggle onmousedown the page will render with the toggle before the click event fires.

.on load not working

I have the most simple .on function i could write. it started off as trying to validate a form on load, then after many minutes of frustration I tried the following:
$('p').on('load',function(){
console.log("hello");
});
This doesn't even work. I'm baffled. Ive tried it both IN and outside of $(document).ready(), neither work, and ive also checked console, there are no errors with my JS.
What could be causing this, its making me so mad

demo
You can always check for existence using length:
var par = $('p.paragraph'); // make it special with some ID or class
if(par.length){ // If your elements exists....
alert(" I'm 'LOADED!' ;) ");
}

ps, divs and other elements don't have a load-event - thats only available on images, windows, frames and iframes.

jQuery does not have a way of firing an event the first time a particular element becomes available. You can do it with setInterval, however there are usually much better ways to handle it depending in the situation.
setInterval(function(){
$("p").not(".alreadyloaded").trigger("load").addClass("alreadyloaded");
},100);
$(document).on('load','p',function(){
console.log("hello");
});
I do not suggest using this method if at all possible.
A better way of handling it would be to either use the callback of the event that is adding the p element (such as the success of the .load() or $.ajax) or by binding delegated events, such as $(document).on('click','p',function(){ alert('hello'); });

jQuery - remove function attached to div

I'm running into a problem with jQuery, so I think I've figured out a workaround, but need help.
I currently attach a cycle() slideshow to my div like this:
function startSlideshow() {
$('#slideshow').cycle({ some parameters });
}
When I pause and restart this slideshow, it exhibits weird behavior, due to bugs in the cycle plugin. So my workaround idea is this: to destroy the existing cycle() and then just recreate it on the fly.
I can easily recreate it by calling startSlideshow() again... but how do I kill the old cycle() that's attached to the div?
I guess I'm looking for a way to "unset" or "unbind" it completely (and jQuery's unbind() method isn't it).
Thanks--
Eric

Use the the plugins destroy command, it has been added to version 2.80
$('#slideshow').cycle('destroy');

You can use $('#slideshow').cycle('destroy');
But are you sure the weird behaviour is due to the cycle plug-in having bugs ? and not improper usage of it ?
How do you pause and restart the cycling ?

First you remove the attached cycle command. Then you remove the inline styles created by cycle:
$("#slideshow").cycle("destroy");
$("#slideshow, #slideshow *").removeAttr("style");
startSlideshow(); // recreate cycle slideshow