ansaurus

Question

jQuery - Animation flicker using hover()

Answer 1

A:

The best way I've found to deal with such issues is to use the HoverIntent plug-in. It was designed to prevent the flicker problems you're having.

GSto 2010-05-18 15:47:05

Answer 2

+1 A:

What if you add a delay() to the fadeout? For example 1-2 seconds. That way you can move your mouse away and back onto the dropdown without causing any animations.

http://api.jquery.com/delay/

Alec 2010-05-18 15:47:58

This looked good but unfortunately it doesn't seem to work with `stop()`

Chris 2010-05-19 14:22:59

I got this working perfectly and it now looks great, thanks

Chris 2010-05-21 10:49:58

Answer 3

+1 A:

I don't seem to be getting the flickering you mentioned, but then again - I did create the markup because yours wasn't available.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(document).ready(function() {
    $("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).stop(true,true).fadeTo('fast',0.1);
        $("#options").stop(true,true).slideUp();
    }
);
});
</script>
</head>
<body>
<div id="dropdown" style="width: 300px; height: 150px; border: 1px solid black;">DROPDOWN</div>
<div id="options" style="width: 300px; height: 150px; border: 1px solid black;">OPTIONS</div>

</body>
</html>

Neurofluxation 2010-05-18 15:52:20

Answer 4

A:

use:

overflow: hidden;

josh 2010-08-03 11:18:21

ansaurus

tags:

views:

answers:

jQuery - Animation flicker using hover()

related questions