jquery mouseover event firing twice - javascript

$(function(){
$('#webs').mouseenter(function(){
$('#websitehov').fadeIn('slow');
});
$('#webs').mouseleave(function(){
$('#websitehov').fadeOut('slow');
});
});
I know there are a ton of questions on this but I've tried a number of them and still not working, I've tried different event handlers including .hover, .mouseover and .mouseenter.
The image hover/hover out effect fires multiple times when it enters and whenever I move the mouse inside the image the two events start firing.
I found one solution that stopped this :
(function(){
$('#webs').hover(function(){
$('#websitehov').fadeIn('slow')
}, function() { });
});
but this only worked for the hover in and not for hover out because the empty function was the mouseout event handler, idk if you can override this?

The only possible problem I can see is that of animation queuing, clear the animation queue before addition another one
$(function () {
$('#webs').hover(function () {
$('#websitehov').stop(true, true).fadeIn('slow');
}, function () {
$('#websitehov').stop(true, true).fadeOut('slow');
});
});
Demo: Fiddle

Related

How can I pause a Bootstrap Carousel on hover and resume it on mouse-out?

I have a Bootstrap Carousel on my website.
When the user hovers over an element #formcontainer, I'd like to pause the carousel. And when I hover off, I'd like to continue the cycle of the carousel. The first part works fine with the following code, but not the second. Can someone assist?
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200,
pause: "hover"
});
$('#formcontainer').hover(function(){
$("#myCarousel4").carousel('pause');
});
});
Use carousel cycle method on mouseleave event
$('#formcontainer').hover(function(){
$("#myCarousel4").carousel('pause');
},function(){
$("#myCarousel4").carousel('cycle');
});
jQuery's hover function has an implementation that takes two arguments: a hover in handler and a hover out handler:
$('#foo').hover(function() {
// handler in
}, function() {
// handler out
});
When you pass it just one argument, the function you give it handles both the in and out events, so you're pausing it on both mouse enter and mouse out.
You need to pass it separate handlers:
$('#myCarousel4').hover(function() {
$(this).carousel('pause');
}, function() {
$(this).carousel('cycle');
});
Note that we can use this to refer to the carousel rather than rewriting its ID. Inside jQuery event handlers, this always refers to the object you bound the event to when possible.
This will work!
(function($) {
$(document).ready(function(){
$('.carousel').carousel({
pause: 'hover'
});
}); }(jQuery));

Using jQuery to control click events by adding/removing classes

I currently have something like this code running:
function blah() {
jQuery(".class1").on("click", function() {
jQuery(this).text('Validate').addClass('class2').removeClass("class1");
//more stuff here
jQuery(".class2").on("click", function() {
jQuery(this).removeClass("class1");
//More stuff here
This is bad because the click events propagate, every click that occurs adds the click event multiple times. I tried closing off the first selector (like so) and having the click events seperately but the second click event never occurred(!):
function blah() {
jQuery(".class1").on("click", function() {
jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(".class2").on("click", function() {
jQuery(this).removeClass("class1");
//More stuff here
How do I structure code so that on the first click one thing happens, and the second click another thing happens without click events doubling
you need
jQuery(document).on("click", ".class1", function() {
jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(document).on("click", ".class2", function() {
jQuery(this).removeClass("class1");
//More stuff here
});
Demo: Fiddle

Disable mouseover event then re-enable

How do I unbind or disable the mouse over after it's being hovered out then re-enable if the other box is faded out.
I tried the unbind, but seems that its not working, it just disables the whole thing.
I even tried a timeout but that is not working into my advantage.
Any help would be appreciated.
$("#shopping_basket").mouseover(function() {
// set a timeout so that this event will not trigger twice when mouseover from the bottom
setTimeout(function() {
/*$("#shopping_basket").unbind(mouseover);*/
$("#miniBasketDetails").fadeIn(500);
},500);
});
$("#miniBasketDetails").mouseleave(function() { $("#miniBasketDetails").fadeOut(500); });
Just a guess try something like this:
$("#shopping_basket").bind('mouseover', function() {
setTimeout(function() {
$("#shopping_basket").unbind('mouseover');
$("#miniBasketDetails").fadeIn(500);
}, 500);
//Re-enable as needed: $("#shopping_basket").bind('mouseover', function(){});
});
This code is not tested, but should work.
I think your problem was that you passed mouseover into .unbind() as a variable, not a string. This is why the "whole thing" was disabled, because JavaScript was looking for a variable named mouseover, which was not defined, and caused your code to break. Try it like this: .unbind('mouseover').
Not sure if this is the algorythm you're looking for, it is based on answers shown in this question.
Here is the fiddle and the code:
$("#shopping_basket").hover(function() {
$("#miniBasketDetails").fadeIn(500);
}, function() {
$("#miniBasketDetails").data('is_over', false);
setTimeout(function() {
if (!$('#miniBasketDetails').data('is_over')) {
//if not hovered over the #miniBasketDetails in 650 miliseconds after mouseleave
$("#miniBasketDetails").fadeOut(500);
}
}, 650);
});
$("#miniBasketDetails").mouseenter(function() {
$(this).data('is_over', true);
});
$('#miniBasketClose').click(function() {
$("#miniBasketDetails").fadeOut(500, function() {
$(this).data('is_over', false);
});
});
The span#miniBasketClose is just one optional "Close button", not necessary for functionality of the code. Its functionality can be substituted (if needed) for example also with hovering over some other elements.

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

jQuery continuously scales a div element using hover()

I recently tried to use jQuery's effect('scale') function with the hover() function in jQuery. The idea is to enlarge the div element on mouseenter, and shrink it back to normal on mouseleave. The code is as follows:
$('.boxgrid').hover(function(){
$(this).effect('scale', {percent:125}, 1000);
}, function() {
$(this).effect('scale', {percent:80}, 1000);
});
I tried testing this in a jsfiddle, but instead of upscaling and downscaling once when a mouse enters the element, it keeps enlarging it. You can see the jsfiddle here. My question is how do I fix it? My understanding was that the mouseenter event was fired only once, and reset when the mouseleaves event is fired, but this seems to say otherwise? Am I missing something? Any help is greatly appreciated.
It calls the hover function every time the animation finishes. I modified it as follows and it appears to work:
window.boxScaled = false;
$('.boxgrid').hover(function(){
if(!window.boxScaled) {
window.boxScaled = true;
$(this).effect('scale', {percent:125}, 1000);
}
}, function() {
if(window.boxScaled) {
window.boxScaled = false;
$(this).effect('scale', {percent:80}, 1000)
}
});
I think you need to force the animation to stop if you leave the box before it has finished scaling (or reenter the box before it has shrunk):
$('.boxgrid').hover(function(){
$(this).stop().effect('scale', {percent:125}, 1000);
}, function() {
$(this).stop().effect('scale', {percent:80}, 1000);
});
http://jsfiddle.net/magicaj/9GLEy/10/
Your understanding of hover (mouseenter/mouseleave) is correct, they should only fire once upon entering/leaving.

Categories