i´m trying to do a hover effect using this script:
function itemhover(){
$(".item").mouseenter(function(){
$(".mask").fadeIn();
})
$(".item").mouseleave(function(){
$(".mask").fadeOut();
})
}
The problem is that when I hover over any item it fades in the .mask of all, how can I point the function to just work on the item that is being hovered?
Also when I pass the mouse in and out on the item real quick, the fade effects goes crazy, is like it doesn´t stop, then it stop after a while, why is that?
thanks
It sounds like your .mask element is contained within your .item element. If that is the case, then you can use $(this) to "set the scope" of the item being hovered (this refers to the item being hovered).
function itemhover(){
$(".item").mouseenter(function(){
$(this).find(".mask").stop(true, true).fadeIn();
})
$(".item").mouseleave(function(){
$(this).find(".mask").stop(true, true).fadeOut();
})
}
Also, you might want to chain .stop(true, true) before your fade animation effect to stop any previously queued animations and to jump to the end of the last queued animation.
you can use the this statement
$(".mask",this).fadeIn();
Related
I am running this animation on $(window).scroll() and it works fine for the most part.
$('#el').animate({ left: toMove }, 500);
The problem is if the user scrolls too fast, two animations will fire and the second animation will fire before the first one has moved far enough. How can I make sure there is only one animation at any given time and then the other animations will follow? I need the element to animate left FULLY any other animations run but I need them all to run. I tried using .queue() but couldn't find the right solution with it.
You could use the stop function like this to smooth things up:
$('#el').stop(true, false).animate({ left: toMove }, 500);
The stop function, when calling like that will clear the animation queue for any waiting animation, as well as stop the current animation if any.
Edit
If you want the animation to end before animating again you just need to call .stop(true, true) instead
I use jQuery function that should animate divs (Slide down and up) like a dynamic menu or something.
The problem is even I set up delay() - when mouse goes over it, no matter how long the cursor stays over one div it will slidewon and up.
To clarify. If I put a mouse over the certain div, it works well, it waits the delay and then slide. But if I fast goes over all divs in the example it will make a weird reaction, like the divs start to slide down but then suddenly stops and go up. Try my fiddle and you'll see.
This is the FIDDLE
jQuery(".subdiv").hide();
jQuery(".mydiv").hover(function(){
jQuery(this).find(".subdiv").stop().delay(800).slideDown("slow");
}, function(){
jQuery(this).find(".subdiv").stop().delay(200).slideUp("slow");
});
So something like this:
http://jsfiddle.net/GzxJf/12/
jQuery(".subdiv").hide();
jQuery(".mydiv").hover(function(){
jQuery(".subdiv").each(function() {
if(jQuery(this).attr('display') !== "none") {
jQuery(this).stop(true).slideUp("slow");
}
});
jQuery(this).find(".subdiv").slideDown("slow");
}, function(){
jQuery(this).find(".subdiv").slideUp("slow");
});
I got a problem with smooth fadeIn and fadeOut in mousemove... I am doing some calculations about what is under top element, and based on those calculations I would like to fadeIn() or fadeOut() tooltip. The problem is that when moving a mouse, events are being shoot like every few milliseconds.
The sitiuation looks like this:
I move the mouse, tooltip is hidden. Suddenly mouse pointer is on top of element that should trigger fadeIn(), but this element is not the triggerer, because it is behind of some other element. So I need to shoot fadeIn() from mousemove. But, when I shoot it, every few milliseconds, it doesn't work, or works million times. But generally, it does not... animation simply stucks as long as I move mouse, because fadeIn() is being called all over again. I am really tired of this, tried to fix it for like 5 hours and nothing.
I've tried:
.stop() before fadeIn() / fadeOut() in different configurations... but the only visible effect I got was that it looked like show(), because stop(true,true) simply deletes the queue and leads to the end of last animation. So, wow! It is show... how... eghn... great :/
Using :visibe selector to fadeOut() and :not(:visible) to fadeIn() ... well.. that of course did not change much, an with stop() it was just leaving semitransparent tooltip
Using rel attribute to define that the fadeOut() was already shoot and should not be shoot anymore... even worse idea, because it simply did not come back after total fadeOut()
To get some reset and thing, but I can't rest when I don't have this problem resolved - it is sooo annoying!
I wonder if anybody reads this anyway... I wouldn't.
So HOW to limit fadeOut(), fadeIn() events to one each time so it would smoothly fadeIn and fadeOut even from middle of animation when event is triggered by mousemove?
I will probably get -1000 for this question... doooh.
I'd suggest you use css for this instead. You lose a bit of compatibility (Most notably older IE's), but it's simpler and will run a lot smoother.
E.g. define opacity in a :hover pseudo class, and then define a transition property with a timing of your choice.
Edit:
Using css in this case has no use because as I said, the event is not trigered by top most layer... stop(true,true) works exactly te same as show() because it is called every few milliseconds, and once is enough to stop fade effect.
In that case, set/unset a class on the fading-element inside your event handler. Let css do the work for you.
E.g.:
<style>
#tooltip { opacity:0 ; transition:opacity 1s linear }
#tooltip.enabled { opacity:1 }
</style>
<div class="has-tooltip">Foo</div>
<div id="tooltip">Tooltip</div>
<script>
$(".has-tooltip")
.on("mouseenter", function() { $("#tooltip").addClass("enabled") })
.on("mouseleave", function() { $("#tooltip").removeClass("enabled") })
</script>
You can try to unbind events before FadeIn/fadeOut and bind again after animation is complete (in complete function).
try this, call this function on mouse move
TIMER='';
function onmove()
{
if(TIMER)
clearTimeout(TIMER);
else
TIMER = setTimeout(function(){
// use yor code here eg. $('whteverID').fadeIn();
},10)
}
my image is at some div, and it's z-index is the highest
When i click on something, I want it to fade out, and fade in on another, specified position. Below the image of another class : ) It's an "aaa" class.
I was doing it like that:
$('img.classy').fadeOut();
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
It's embedded to click event. When I run it and click the area, img.classy FIRSTLY changes it's position, then on new position it fades out and fades in. I want obviously to make it that way: fade out -> change position when invisible -> fadein on new position. how to do it?
This will do:
$('img.classy').fadeOut(function() {
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});
Because fadeOut and fadeIn are asynchronous functions, the script continues to run, those causing your img to change its position immediately.
You need to wait until the fadeOut is complete. I added a callback function for you.
$('img.classy').fadeOut('slow', function() {
$(this).css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});
this will clone the img, remove it and append it anothor wrapper:
.aaa {position: relative}
.classy {position: absolute; right:0; top:0}
$('img.classy').fadeOut(
cloned = $(this).clone(true);
$(this).remove();
$("img.aaa:last").append(cloned);
$(".classy").fadeIn();
);
I am trying to create a 'cart' link where the shopping cart opens out on hover. I am able to get the cart to open out on hover and close when moving away. However I cannot get the cart block to stay open once hovered over. I would like the car block to open out on hover and stay open if you hover over it. You will see what I mean if you hover over the 'cart' link in the top right corner of this page.
http://dl.dropbox.com/u/4380589/Rococlothing/index.html
The jQuery I am using is:
jQuery('#cart-links .links .first a').mouseover(function(){
jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
jQuery('.block-cart').slideUp(400);
});
jQuery(".block-cart").mouseover(function(){
jQuery(this).show();
}).mouseout(function(){
jQuery(this).fadeOut("slow");
});
You need to cancel the first mouseout() so you'll need adjust the second part to
jQuery(".block-cart").mouseover(function(){
jQuery(this).stop(true).show();
}).mouseout(function(){
jQuery(this).fadeOut("slow");
});
note that the stop, I am passing in true so its clearing the current animation queue. jQuery doc for stop is # http://api.jquery.com/stop/
hovered = false;
jQuery('#cart-links .links .first a').mouseover(function(){
jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
setTimeout(function(){
if(!hovered) {
jQuery('.block-cart').slideUp(400);
}}, 250);
});
jQuery(".block-cart").mouseover(function(){
hovered = true;
}).mouseout(function(){
hovered = false;
jQuery('#cart-links .links .first a').trigger("mouseout");
});
It looks like the .block-cart is not a child of the element that triggers the hover, so in order to keep the hover state active you'd have to structure your HTML in a way that the .block-cart is a child element of the element that triggers the hover.
Btw: why don't you use $(this).hover() instead of $(this).mouseover().mouseout(), it's a little easier