jQuery hover() only triggers when mouse move

2
votes

I have a button that changes opacity when it is hovered: (works fine)

$('#btn').hover(function() {
    $(this).animate({'opacity':1},100);
}, function() {
    $(this).animate({'opacity':.8},100);
});

And when it is pressed it moves down: (works fine too)

$('#btn').on('click',function(){
    $(this).animate({'margin-top':'-100px'},400);
});

Problem: When the button moves, it moves away from the hover area, but the first hover state is still active (the first hover state should only be active when the mouse is hovered over the button). However, if I move the mouse from there on, the second state triggers as jquery notice that mouse moves.

Is there any way for hover() to trigger even if mouse is not moved?

2
jquery
Why are you using jQuery.animate instead of CSS transitions? – connexo
Can you provide a jsfiddle ? – Hari Ram
I think the right tool for this job is CSS – frenchie
@connexo Because css transitions 1) delayed animate() and also 2) using css gave me the exact same problem. – Rasmus
@frenchie Tried with css too and the same problem: only triggers when mouse moves.. :/ – Rasmus

2 Answers

3
votes

Use $(this).trigger("mouseout")

This will cause the correct hover() handler to fire.

Demo: http://jsfiddle.net/alan0xd7/va87ff96/

0
votes

If I understand well, the problem is that the hover state is still active, after moving.

Then why not add the opacity to the animation too?

$('#btn').on('click',function(){
    $(this).animate({'opacity':.8,'margin-top':'-100px'},400);
});

DEMO