jQuery Forum

.stop() | jQuery API Documentation or .finish() | jQuery API Documentation

Ah. That's great, thanks for that.

I unfortunatly worded myself wrong. I meant to say, how do I stop multiple events from firing/queing while the first event is executing? Should I unbind a click/hover while the event is fired, then rebind it after it's finished to stop such situations from arising?

You could. Or you could see if something is animating with :animated Selector | jQuery API Documentation

Really dippy question, I don't see the application of this tool just yet. Are you suggesting that I apply a function with the animated selector that disables all click/hovers that are currently in their animation process? And by result when they are not animating they will be available to be re-activated?

If you are animating #xyz, and you test for $("#xyz:animated").length you get 1. If it isn’t animating at that moment you get 0. Which can be used as booleans true and false. 

Ah ok. So if X == 1 .... nice way of saving code.

I'm still a bit iffed on what approach to go at this. Unbinding/binding a click/hover seems quite drastic. Or is an accepted standard?

It’s not normal. But some people do it.

here's a basic example http://jsfiddle.net/Ewg5T/

If you move your mouse repeatedly over the box it repeats the animation multiple times. It's a pain :S

I would do it like http://jsfiddle.net/jakecigar/Ewg5T/1/ . The background is red to show where the wrap div is.

Oh that's cool. That's a good example of using stop.

Hmm...I don't think this will work though for this particular situation. I don't have much space, so the wrap for each element would overlap and cause issues. But I like the usage of stop here.
*edit* I Mean I could add more code to shrink the other elements wrap and extend the inital elements wrap. But that seems like alot of excessive code for a simple issue of controlling the mouseover/mouseout.

I suppose the only way I can do this is to restrict hover somehow. Unbinding it my fall to atm. http://jsfiddle.net/Ewg5T/5/It's however not rebinding. Is there a particular reason?

Your fiddle doesn’t make much sense to me. As soon as I get over the box, it moves, which causes a mouseleave. 

I was just experimenting with a concept more than actual application. I know what you mean though, the mouseleave will just execute the moment it moves away from the mouse.

let's put that aside. I want it to execute the function and disregard any input from the user until the function is completed. So I need to disable the hover, or remove queueing until the function is completed.

I tried using the animated selector in this, but I'm not using it properly.

My thinking is like this.

"Hover element(mouseenter). If the element is not animated perform animation. Animation commences. Mouseout - perform animation.

From here there should be a fluid animation process happening so no matter how many times you mouse enter once the function starts, the mouse enter will be disregarded until the animation stops."

Not sure how to get this to work. http://jsfiddle.net/Ewg5T/10/

If you ignore a mousenter because something is already "busy" what do you want to do with the mouseleave?


Although it’s still a mess, http://jsfiddle.net/jakecigar/Ewg5T/11/ stops other box movement until it is done.

:P never used these methods before.

Am I reading this right?

Bind(on) variable anime to .box

Inside Anime --> $(".box").not(theBox).off(anime)

Is this saying, remove the hovered ID and unbind Anime from it?

It's the .not() I think I don't understand. Does this method grab/isolate the highlighted element so you can adjust it appropriately with another method? As such turning the variable Anime on/off(bind/unbind)?

Or is this happening? You bind the variable anime to the entire class of .box. Once initiated, the variable is removed from all elements except for the one highlighted with the mouseenter?
Once the mouseleave is completed, the variable is re-applied to all the other elements in the box class?


http://jsfiddle.net/Ewg5T/13/ Sorta works a bit smoother.Allows for multiple events to be fired, but doesn't really queue as much. It still queues slightly, and isn't crystal smooth though. But it's something atm.

I'll have to play with this more. I wonder if there is a way to access or view the events that are fired in the browser and somehow manipulate them from there. I'll have to take a deeper look into it. Thanks man, that's really helpful. I finally see how to bind/unbind variables/functions.

I was trying everything I could think of!

Oh, I want them to all move. But the problem arises if the user moves back and fourth over the same element it would queue multiple events making it look "out of control". I want it to allow for all the functions to be fired, but not queing. It's the beginning of a seamless interaction between the user and the environment if I get it to look right. Imagine vertical blades of grass for example. you move your cursor left across them, they all bend to the left. Right now I'm trying to have 100% control over how I code the elements, so I'm working from the ground up I guess.

This is just personal project at the moment. I hope if I ever gain a proper grasp on this to be able to create UI's that's seemless and organic for the user(s). Very suddle interactive elements can make all the difference. But the moment one thing starts queing or doing something on it's own it shatters that fluid workspace, which can dampen the content inside the UI.


Don't worry, if I was writing a game, in the end I'd have to give credit to people here :D Right now it's just a very .. long crash course in learning how to code basic things.

Did you look at .stop() | jQuery API Documentation or .finish() | jQuery API Documentation to send the animation directly to the end of the animation before starting a new one?

Ah, you mean if the element is re-fired it essentially resets directly to the beginning instead of queuing?  Yeah I sort of bypassed that as an option for this case because of the "snap" effect it creates. Though.. I suppose I could use stop()


The writeup mentioned this.

If the first argument is provided, only the animations in the queue represented by that string will be stopped.

I'm not sure what sort of argument they are meaning. Or if they mean the animation will complete it's function normally and all queued commands will be disregarded.

But yeah. I've only scratched at the surface of what these methods are capable of. I'll take a deeper look into finish(). I'm 100% sure from what you've shown here I can make what I want happen. I just need to get my head around these methods.

You may get some help by specifying a queue in all the animations to force them into the same queue. I haven’t played much with them.