Javascript – jquery slide up and down with animate wont stop sliding

event-bubblingjavascriptjquery

i have a photo with some content on top of it (name, desc, price) the content is in a ul. in default state the ul only shows the name by setting the absolute position of the ul toward the bottom of the image and then hiding the overflow with a mask div. then when you mouseover the ul slides up showing the whole info as long as you stay on the image. when you mouseout it slides back down to its initial position just showing the title… that's how it should work. right now when you hover your mouse it slides up and down, up and down forever.

here is the html and styles

div.banner_product {
    float: left; width:  236px; position:  relative; overflow: visible;
}
div.banner_product ul {
    width:  220px;
    background-color: black;
    font-size: 16px;
    color:  white;
    list-style-type: none;
    position: absolute; top:  230px;

    margin: 8px;
    filter: alpha(opacity=70); /* internet explorer */
        -khtml-opacity: 0.7;      /* khtml, old safari */
        -moz-opacity: 0.7;       /* mozilla, netscape */
        opacity: 0.7;           /* fx, safari, opera */

}
.mask {
position: absolute;
top: 0;
overflow: hidden;
height:  300px;
width:  235px;
}


/*html*/
<div class="banner_product" id="pi1"><img src="image1.jpg" alt="" border="0" height="306" width="235" /><div class="mask">
        <ul id="bd1">
            <li class="name-b"><a href="#">PRODUCT NAME</a></li>
            <li class="text-b">DESCRIPTION</li>
            <li class="price-b">PRICE</li>
        </ul></div>
    </div>

this is the script:

$('#pi1')
.bind('mouseover',enterImg)
.bind('mouseout',exitImg)
function enterImg(event){
$('#bd1').animate({"top": "4px"}, 2000);
event.stopPropagation();

}
function exitImg(event){
$('#bd1').animate({"top": "236px"}, 2000);
event.stopPropagation();

}

Best Answer

I think that every time #bd1 crosses your mouse pointer (which is presumably hovering over the image), it is calling the mouseout, then calling mouseover when it gets past.

To test this, activate the animation by pointing to the very bottom of the image, then moving the mouse out of the way immediately.

EDIT:

Hmmm... for me, if I make sure the banner doesn't cross the pointer, it helped, but of course that's not a fix.

One solution seems to be to use jQuery's hover() method instead of the specific mouse events:

$('#pi1').hover(
    function (event){
        $('#bd1').animate({"top": "4px"}, 500);
    },

    function (event){
        $('#bd1').animate({"top": "236px"}, 500);
    });

Works in webkit anyway. Haven't test IE.

Related Topic