Develop Reference

jQuery trigger event with delay

I have a situation in which I have a series of buttons on a page. Clicking a button triggers several functions and runs a series of complex calculations.
Then I have what is essentially a "click all" button that will trigger a click event on each button:
$('.myBtn').trigger('click'); // $('.myBtn') returns a list of all buttons
This works fine in most modern browsers, but in IE the trigger('click') takes a long time to run and I often get a 'script is taking too long' error.
Unfortunately, the way things are set up there's no real way to avoid the heavy calculations on click.
So I'm thinking of adding some sort of delay. So on "click all", trigger btn1 click, wait 200ms, trigger btn2 click, wait... etc.
I've tried things like:
$('.btnAll').each(function() {
var el = $(this);
setTimeout(function () {
el.trigger('click');
}, 200);
});
But I don't think this works correctly because of the way .each() calls are queued or something(?). Event queueing and synchronous calls are still a little unclear to me.
Any thoughts on how I can make this work?

.each() calls are not 'queued', they just execute the given function on each element of the collection, one after the other. So you set for each button-click a timeout of 200ms. The result: 200ms later all buttons are triggered at (nearly) same time. If you want to stagger the clicks with delay in between, you must give them different times like so:
$('.btnAll').each(function(i) { // i is index of this in the collection
var el = $(this);
setTimeout(function () {
el.trigger('click');
}, i * 200); // each button gets a multiple of 200ms, depending on its index
});
This triggers the first button immediately, the second 200 ms later, the third.... .

Try it
function myEach(){
$('.btnAll').each(function() {
$(this).trigger('click');
});
}
setTimeout(myEach(),200);

How to re-enable button hovers in jquery

http://codepen.io/Snowfiring/pen/oKpBh
I'm attempting to disable the animation on click because when clicked, the animation starts moving and if your still hovered over an object it freezes, the end result is the animation stops running and it just moves,
my code to freeze the animation on hover is
function show_box() {
if($(window).width() > 768) {
$('.tab-content').hide(0,
function() {
$(this).prev().css('right', '29.337803855%');
$(this).prev().children().children().click(function () {
$('.favorite').off('mouseenter').css('-webkit-animation-play-state', 'running');
$('.secret').off('mouseenter').css('-webkit-animation-play-state', 'running');
$('.current-projects').off('mouseenter').css('-webkit-animation-play-state', 'running');
$('.tab-selection').animate({right: 0}, 3000).queue(function() {
$('.tab-content').show(1000);
});
$('.favorite').on('mouseenter');
$('.secret').on('mouseenter');
$('.current-projects').on('mouseenter');
});
}
);
}
}
to disable hover on mouseenter and mouseleave i used
.off('mouseenter')
but after the function is done, and the moving complete I set
.on('mouseenter')
but it doesn't re-enable.

At first your code could be much shorter, i think.
And please take a look in the jQuery doc for the on function it does Not, what you are expecting!
I think you should set a global variable if it is disabled at the moment and in the eventhandler you firstly check the variable and abort if its disabled.

Stop & reenable hover with click

I have a container that fades on a timer when hovered on (#module-container) but when clicking on a .return-news, it stops the hover and keeps it from fading. Now I need it where, when called through a function, I need to allow the hover effect again on the #module-container just like before. Here's the hover code:
var module = $('#module-container');
$('.menu-control').add(module).mouseenter(function() {
module.stop().show();
clearTimeout(window.mtimer);
console.log('hovered');
});
$('.menu-control').add(module).mouseleave(function() {
var time = 3000;
window.mtimer = setTimeout(function() {
module.fadeOut(600);
}, time);
console.log(window.mtimer);
});
By clicking .return-news, I've successfully stopping the hover with this line:
$('.return-news').on('click',function(e) {
e.stopPropagation();
module.add('.menu-control').off('mouseenter').off('mouseleave');
console.log('stop it!');
});
NOT WORKING: If I click .next-video then I need to re-enable the hover (which will then use the mouseeneter and mouseleave functions previously declared). I've tried calling this line but it doesn't work:
$('.next-video').on('click',function(e) {
e.stopPropagation();
module.add('.menu-control').on('mouseenter').on('mouseleave');
});
Later, I'll be having the hover re-enabled by calling it using Vimeo's API (instead of the .next-video click) but for the sake of time, I stripped the code to it's basic functionality.
HERE'S THE CODE ON JSFIDDLE.

jQuery: Prevent stacking animations

I know there are several other posts with solutions to this, but my current problem is a little different.
I have two events on an element - mouseenter and mouseleave. The first changed the color of my element to light and the other back to dark, this makes a flashing effect.
The problem is when I go in and out a couple of times the events stack and it flashes many times even if no new events are triggered. I would like to prevent that, but .stop() does not help.
Here's the catch: I would like to trigger 1 flash no matter what, but not more than 1. So when someone moves in / out - the event mouseenter will be fired, after it mouseleave and after it nothing.. until another in / out is triggered.
I guess this could be made by locking (not listening for) new events when in / out is triggered up until the effect has finished, but I don't know how to do without unbinding and binding it again. Isn't there any lockEvent() or something?

Have you already used .stop(true) or .stop(true, true)?

there is pseudo-class in jQuery ":animated"
you can use it on first mouseenter even like:
if ( $(this).is(':animated')) {
return false;
}
to prevent additional animation

You can try just setting a bool var and firing only if false...
var anim = {
animating: false,
over: function(){
if(!anim.animating)
{
anim.animating = true;
// do you animation here
// and set your animating bool to false before calling outro...
$('#elem').animate({/*some css change*/ }, 1000, function(){
anim.animating = false;
anim.out();
});
}
},
out: function(){
if(!anim.animating)
{
anim.animating = true;
//do your outro animation here
$('#elem').animate({/*some css change*/ }, 1000, function(){
anim.animating = false;
});
}
}
};
then have your listener call anim.over and anim.out...
$('#elem').on('mouseenter', function(){
anim.over();
}).on('mouseleave', function(){
anim.out();
});
This way you will call animation on enter and it will automatically fire off the outro animation when the intro completes.

Stop duplicate mouse over detection

I have a popup that is executed on mouseover with jquery.
Within that function I have a second delay before the popup displays using settimeout
Problem is if in that second they mouse over multiple times then multiple popups are triggered.
$('#div').mouseover(function() {setTimeout("popup()",1000);});
What I need to do is disable the detection and then re enable it in popup().
How might I do that?

You can use .hover() with a clearTimeout(), like this:
$('#div').hover(function() {
$.data(this, 'timer', setTimeout(popup, 1000));
}, function() {
clearTimeout($.data(this, 'timer'));
});
This clears the timeout you're setting if the mouse leaves, you'll have to stay on the element for a full second for the popup to trigger. We're just using $.data() on the element to store the timer ID (so we know what to clear). The other change is to not pass a string to setTimeout() but rather a reference directly to the function.

I guess something like this
(function(){
var popup_timer = 0;
$('#div').mouseover(function() {
clearTimeout(popup_timer);
popup_timer = setTimeout("popup()",1000);
});
});
EDIT updated code, clearTimeout added, wrapped