Multiple Div Jquery Animated Hover

Question

I have a few nested divs with different articles in them.

<div id="maindiv" onmouseover="showbuttons()" onmouseout="hidebuttons()">
    <div style="float: left"></div>
    <div style="float: right">
         <div id="buttons"></div>
    </div>
</div>

function show() {
    $('#buttons').slideDown('fast')
    //$('#buttons').stop().slideDown('fast')

}

function hide() {
    $('#buttons').slideUp('fast')
    //$('#buttons').stop().slideUp('fast')

}

The problem is I think the hover event gets fired a couple of times so I keep having the buttons disappear and reappear. So I added stop() - Which is commented in the code above. But then I have buttons half way through the page (due to the cancelled animation) when I have the mouse leave.

Or perhaps theres a way to do this in CSS?

Hiya man seems working here: http://jsfiddle.net/Zarhu/1/ let me know if this helps and want me to set up as answer! B-) — Tats_innit, May 17 '12 at 07:25
It seems to have the same problem, move the mouse in the div but off and back on the button div — Tarang, May 17 '12 at 07:26

scessor · Accepted Answer · 2012-05-17T07:26:37.963

2

Remove the onmouseover and onmouseout attributes from the div and replace your javascript with:

$('#maindiv').hover(
    function() {
        $('#buttons').stop().slideDown('fast');
    },
    function() {
        $('#buttons').stop().slideUp('fast');
    }
);

edited May 17 '12 at 07:26

answered May 17 '12 at 07:18

scessor

15,995
4
43
54

"onmouseenter is IE-specific. Doesn't work in other browsers unless you use jQuery which can simulate this event." http://stackoverflow.com/a/1638929/246260 – dezso May 17 '12 at 07:19

ubik · Answer 2 · 2012-05-17T07:32:41.887

1

I believe you should do something like:

$('#maindiv').hover(function() {
    $('#buttons').stop().slideDown('fast')
}, function() {
    $('#buttons').stop().slideUp('fast')
})

It's cleaner and simple.

edited May 17 '12 at 07:32

answered May 17 '12 at 07:26

ubik

4,440
2
23
29

score 0 · Answer 3 · answered May 17 '12 at 07:31

0

for starts,

 show()

is already used by jquery so for sanity avoid that name

remove the event listener from being inline with the markup ..

  $("#maindiv").mouseover( function() {
    $("#buttons").stop(true, true).slideUp();
   });

  $("#maindiv").mouseout( function() {
    $("#buttons").stop(true, true).slideDown();
   });

look into the toggle function too

answered May 17 '12 at 07:31

Rob Sedgwick

5,216
4
20
36

I only used show for the sake of the simplified code example, thanks – Tarang May 17 '12 at 07:32

Multiple Div Jquery Animated Hover

3 Answers3