CODEWITHSUNDEEP
jqueryhtmlcss
Tarang
Tarang

Reputation: 75945

Multiple Div Jquery Animated Hover

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?

Upvotes: 0

Views: 453

Answers (3)

ubik
ubik

Reputation: 4560

I believe you should do something like:

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

It's cleaner and simple.

Upvotes: 1

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

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

Upvotes: 0

scessor
scessor

Reputation: 16115

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

Upvotes: 2

Related Questions