Chronic Bounce - Mouseenter Mouseleave
Symptoms:
In FF and maybe other browsers, I have a weird bug.
When you slowly move mouse up and then just past the top of the search tab you can get the animation into a 'BOUNCE' state. Up and down, Up and down. I want to eliminate this bug like behavior but I can't seem to figure out how. Do you have any ideas or possible work-arounds? I would appreciate it so much!
Live code here:
http://www.architecture2030.org/temp/re ... 90409.html
JQUERY code:
-
<script type="text/javascript">
$(document).ready(function(){
$("#searchtab").mouseenter(function(){
document.getElementById('searchform').className = "show";
$("#searchtab").animate({
height: "150px"
}, 'normal', null, function() { document.getElementById('searchform').className = "show"; } );
}).mouseleave(function(){
$("#searchtab").animate({
height: "40px"
}, 'normal', null, function() { document.getElementById('searchform').className = "hide"; } )
});
});
</script>
HTML code:
-
<div id="searchtab"><br />search 2030 (most popular and more)
<div id="searchform" class="hide"><br /><br /><input type="text" name="kw" /> <input type="button" value="search" />
</div>
</div>
CSS code:
-
#searchtab {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
color: #000000;
background-color: transparent;
background-repeat: repeat-x;
height: 40px;
width: 300px;
position: absolute;
z-index: 32;
background-image: url(images/searchtab_full.png);
text-align: center;
line-height: 95%;
bottom: 0px;
right: 240px;
}
#searchform {
background-color: transparent;
background-repeat: repeat-y;
height:60px;
position:relative;
top:11px;
}