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.
Related
$(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
Here is the working demo.
http://jsfiddle.net/Evqqp/1/
Please check the demo to easily understand the issue. Click on the arrows fast and you will see the view mess up.
I understand it might be because of the 300ms animation i do. What is a clean way to handle the clicks such that it does not mess up the view. I can use a flag to check if the previous click action is complete. But i wanted to seek opinions if there is a better way to do this.
Code where i do the animate
$(".rightArrow").on("click", function () {
if ((Math.abs(parseInt($(".slideBox").css("margin-left"))) + $(".mainDiv").width()) < $(".slideBox").width()) {
$(".slideBox").animate({
"margin-left": parseInt($(".slideBox").css("margin-left")) - $(".mainDiv").width()
}, 300, checkRightArrow);
$(".leftArrow").show();
} else {
$(".rightArrow").hide();
}
});
Thank you
Check if your element is currently animated with the following
if(!$('#myElement').is(':animated'))
{
// Do your animation here
}
Try .stop(true,true)
$(".slideBox").stop(true,true).animate({
Whenever working with animations you should always stop() the previous animation on the element before animating it again.
$(".slideBox").stop(true, true).animate(...
http://jsfiddle.net/Evqqp/4/
You need to add
event.stopPropagation();
after:
$(".rightArrow").on("click", function () {
so:
$(".rightArrow").on("click", function () {
event.stopPropagation();
...
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.
I have a <div> that when hovered over, will show some text. When the mouse leaves, the text fades out. However, if the mouse enters the <div> again before the fadeOut is complete, the text never shows again.
I am aware of hoverintent, but I'd prefer not to use it because of the slight perceived delay it gives to the mouseEnter/mouseLeave events.
Is there no way that, upon mouseEnter, it simply clears the fadeOut and shows the text again?
My current attempt using timeouts:
var timeouts = {};
$(document).ready(function(){
$('#wrapper').hover(function(){
clearTimeout(timeouts['test_hover']);
$('#text').show();
}, function(){
timeouts['test_hover'] = setTimeout(function(){
$('#text').fadeOut('slow');
});
});
});
jsbin: http://jsbin.com/upotuw/5
video: http://www.youtube.com/watch?v=7RLrz1bEQuU
--
EDIT: Issue was needing to pass both parameters to the stop() function: stop(true,true)
Final working code is as follows:
var timeouts = {};
$(document).ready(function(){
$('#wrapper').hover(function(){
clearTimeout(timeouts['test_hover']);
$('#text').stop(true,true).show();
}, function(){
timeouts['test_hover'] = setTimeout(function(){
$('#text').fadeOut('slow');
});
});
});
http://jsbin.com/upotuw/7
You want to look into the JQuery stop() function:
http://api.jquery.com/stop/
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();
});