We Keep Coding

How do I stop jQuery hover flood?

I have a problem with my "menu" items that have an image, and by hovering them, jQuery brings out a text and a description for that image. However, I could not find any way to block or stop this effect from flooding.
See the example, from this try moving your cursor around the four boxes, fast, you will see that they kind of queue, and I don't really want that to happen.
This is my jQuery code:
$(document).ready(function() {
$("[rel='tooltip']").tooltip();
if($("#editor").val()!="1")
{
$('.thumbnail').hover(
function(){
$(this).find('.caption').fadeIn(450)
},
function(){
$(this).find('.caption').fadeOut(800)
}
});
});
Ways to stop this?

Try adding .stop() (jQuery API reference) to your selector. It will cancel an ongoing animation
$(this).find('.caption').stop().fadeIn(450)

slideToggle issue with stop()

$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").slideToggle("normal");
return false;
});
});
With this piece of jQuery code I can make elements slide in and out. But the problem is that when someone clicks real fast, the slide out will only go until the max height is reached of the latest reached height.
So, if someone would click real fast the element will only slide out a couple of pixels and slide back up. If they´d than click again to slide it out, it will only slide out to the max height it reached the last time.
Can anybody help me to fix this issue to make this work proper?
PS: The height of the p element is set to auto so it automaticly matches the height of the content inside (maybe this detail will help with your answer).

Instead of using the click function to attach the click event, use one instead:
$("ul li").one("click", doStuff);
function doStuff(){
// do your stuff here
$("ul li").one("click", doStuff); // Re-attach event
}
and then re-attach the event in the function.

Try this:
$(document).ready(function() {
$("ul li").click(function() {
if ( ! $(this).find('p:animated').length)
{
$(this).find("p").slideToggle("normal");
return false;
}
});
});

If you want to actually process the additional clicks (rather than ignore them), then you want to use .stop(true, true) to stop the previous animation and jump it to the conclusion so your next animation can run as you want:
$(document).ready(function() {
$("ul li").click(function() {
$(this).find("p").stop(true, true).slideToggle("normal");
return false;
});
});
Whenever you trigger an animation from a user click, you should know about .stop() and figure out which arguments you want to use with it for a given situation. Without it, the animations can pile up in the queue and run sequentially which is usually not what you want.
Here's the jQuery reference info on .stop() and it's arguments.

Javascript listener not firing if before end of jquery .slideDown() animation

simple one i hope!
The problem im having is that i have an ('itemID').mouseover, which fires a jquery slide-down animation for a menu box.
The problem is that if the mouse leaves the original item (in this case a text link) before the end of the slideDown() amination, the .mouseleave function is not called.
It works fine otherwise!!
This is what im using: (menu14 is the text link, FunctionsMenu3 is the hidden div containing the menu items)
$('#menu14').mouseover(function() {
$('#FunctionsMenu3').slideDown('fast', function() {
// Animation complete.
});
});
$('#FunctionsMenu3').mouseleave(function() {
$('#FunctionsMenu3').slideUp('fast', function() {
// Animation complete.
});
});
It seem to me that the JS CANT be fired, because its busy doing the slide...
site can be seen at http://www.impero-classroom-management.com
thanks in advance!!

On mouseleave, try .stop() to cancel the current animation.
$('#menu14').hover(
function() {
$('#FunctionsMenu3').slideDown('fast');
},
function() {
$('#FunctionsMenu3').stop().slideUp('fast');
}
);

Well i got around it in the end by not animating the drop down, only the slide up.
not a fix, but it was all i could really do!!
$('#FunctionsMenu5').mouseleave(function() {
$('#FunctionsMenu5').slideUp('fast', function() {
// Animation complete.
});
});
$('#menu15').mouseover(function() {
$('#FunctionsMenu5').show();
});

fadein/fadeout issue, tried stop but does not work

So all I want to do is fade out a div and fade in another. When i hover a link i want to fadeout prev div and fade in the proper div. everything works fine unless I hover over the links too fast. when i hover too fast, a div would not get faded out. I have tried using stop(), and tried different combinations of true false on the stop function but nothing works. if i change the fade timer to 0 then it works. the code I have is too much to pasted here but basically it is not a simple fadein/fadeout. I have some other stuff going on before the fade function is called
here is my fade function
var fadeEffect = function (a, b) {
$(a).fadeOut(300, function () {
$(b).fadeIn(300);
});
}
it's a private function inside of an object. I tried using stop() on a and/or b and i still get the same thing. If i change the 300 to 0, it works fine
anyone have any ideas?
simplified version here http://jsfiddle.net/LLMUX/9/

I have updated your JSFiddle -> http://jsfiddle.net/manseuk/LLMUX/11/
What i did was add the stop to the divs that were being animated - that stops the duplicates :
$("#vehicleSelector .vehiclesList").bind({
mouseenter: function(event) {
$('#vehicleSlides div, #promoSlides div').stop(true,true); // stop any running animations
event.stopPropagation();
sControl.timerIsOn = false;
showSecondary(this.id)
},
mouseleave: function(event) {
$('#vehicleSlides div, #promoSlides div').stop(true,true); // stop any running animations
event.stopPropagation();
next();
}
});

Fade in/out buttons on mouseover of an image with jQuery. A few bugs to work out

So, I essentially have what I want already, very simple, but there are some bugs. I just want so when you hover over an image, two left/right buttons appear on the image that allow you to click through other images. Then when you leave the image area (excluding the left/right buttons), the buttons fade out again. Here's what I've got:
$(document).ready(function() {
$('#image-slider').mouseenter(function(){
$('.next').fadeIn('50');
$('.prev').fadeIn('50');
}).mouseout(function(){
$('.next').fadeOut('50');
$('.prev').fadeOut('50');
});
});
Bug #1: However, when you mouseover the image the buttons appear, and if you mouse over the buttons, they disappear. Naturally, of course they do, this is because I told them to fade away when I left the image area. First of all, I need them to stay visible even when you hover over them. So I need to somehow include the buttons as part of my image area in my javascript. That's the first problem/
Bug #2: This is a common problem I see in javascript. When you hover over the image, the buttons fade in, hover off, they fade out. Of course, there's a duration to this, and if you keep hovering in/out/in/out/in/out before the duration can finish, then when you let it fly, it will go on and off and on and off. How can I prevent this? So that is you hover out of the image area while the buttons are fading in, it just stops the animation sequence in its tracks so you don't get that continuous fading in/out.
Thanks in advance!
~ Jackson
ETA: the fix
I got it solved! A combination of your fix and #Pumou's.
I made another div just to wrap the two items and expanded it to cover the image, then I set the mouseover to be that div. Problem #1 solved.
I used puormo's .fadeTo() trick to solve problem #2.
Then, I used tweaks from everyone to shorten up the code so it was neat and tidy. Thanks to all!
I've decided on #jfriend00's solution. It's the shortest, great work!
Here's my final javascript:
$(document).ready(function() {
var b = $('.ps_next, .ps_prev');
$('#slider-wrapper').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(0,1).fadeIn(100) ) :
( b.stop(0,1).fadeOut(100) ) ;
});
});

Problem #2 can be fixed with .stop() which forces any previous animations to just to their conclusion before starting the next one.
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_next').stop(true, true).fadeIn(400);
$('.ps_prev').stop(true, true).fadeIn(400);
}, function () {
$('.ps_next').stop(true, true).fadeOut(400);
$('.ps_prev').stop(true, true).fadeOut(400);
});
});
It may be better to use the .hover() jQuery function which handles both enter and leave rather than mouseenter() and mouseout().
You can see both an example of .stop() and .hover() on this jQuery doc page doing almost the exact same thing you are.
For problem #1, I think we'd need to see the structure of your HTML to know how best to advise on that as their are several choices depending upon how things are structured. You could also do the fadeOut on a delay that was cancelled if they hovered over the button so there was time to get the mouse to the buttons before they disappeared. Or, you could use .hover() on a container that contained both image and buttons.
You can see it working here: http://jsfiddle.net/jfriend00/Zk6rY/.
Shortened the code (as seen in the above jsFiddle) even more to this:
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_button').stop(true, true).fadeIn(400);
}, function () {
$('.ps_button').stop(true, true).fadeOut(400);
});
});

$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').mouseenter(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
}).mouseout(function(){
$buttons.stop().fadeTo('50','0');
});
});
I have also used stop();. I've also shortened it to use one selector to select both buttons (in this case, it was set to the variable $buttons).
I noticed that if your mouse entered the image div, and then left, and then entered again, the buttons were fading in to 50% opacity because of the stop();. I fixed this by using the fadeTo(); feature: the first one is the duration, which was set to 50 like yours, and the second one is the opacity to fade to (a number between 0 and 1).
I also solved the problem of keeping the buttons there when you hover over them. See this line:
$buttons.mouseenter(function() { $buttons.show(); });
This just uses show();, which gives the element display:block; on mouseover.
Example here: http://jsfiddle.net/purmou/MM4ba/1/
More about stop(); here: http://api.jquery.com/stop
More about fadeTo(); here: http://api.jquery.com/fadeto
EDIT: Updated the code so that it now uses jQuery's hover(); function. Shorter code is always better.
$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').hover(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
},
function(){
$buttons.stop().fadeTo('50','0');
});
});
Example: http://jsfiddle.net/purmou/MM4ba/2/
More on hover(); here: http://api.jquery.com/hover

DEMO FIDDLE
var b = $('.btn');
$('#image-slider').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(false, true).fadeIn(300) ) :
( b.stop(false, true).fadeOut(300) ) ;
});
(with your markup and the use of ternary-operators)

You all might be looking for this awsmness.....
$(document).ready(function () {
$('#content').hover(function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
}, function () {
$('.a').stop(true).fadeOut(500);
$('.i').stop(true).fadeTo(500, 1);
});
$('.a').hover(function () {
$('.i').stop(true).fadeTo(500, 0.95);
}, function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
});
});
http://jsfiddle.net/Sourav242/p0z0oh82/