Jquery animate firing on mouseover of an element inside div, cause by event bubbling?

Hi there,
im having trouble using JQUERYs animate function.

Basicly the div has a mouseover event that slides another div (that is inside the original div) upwards. The first div has a mouseout event that slides the second div downwards and out of view.

The problem being that when you hover over the second div it fires the first divs mouseout event.

Ive tried googling this and have tried adding some event bubbling but having serious trouble with it.

here is the website…
http://www.freemanholland.com/thecircleclub/public_html/galleries

hover over the image and you should see the caption appear, roll over the caption and it goes crazy.

<div class="gallery-event" style="height:158px; overflow:hidden;">
                <img id="gallery-image" style="opacity:0.4;" onmouseover="$(this).animate({opacity: '1'}, 500 ); $('.caption').animate({top:'-50px'}, 500 );" onmouseout="$('#gallery-image').animate({opacity: '0.4'}, 500 ); $('.caption').animate({top:'0px'}, 500 );" src="<?=__SITE_PATH?>images/pic21.jpg" alt="pic 21" />
                <div class="caption" style="position:relative; top:0px; background-color: #080808; opacity:0.8; width:287px; overflow:hidden;">
                    <div style="padding:10px;">
                    <span style="font-size:13px; color:#ffcc00">Chocolate Factory</span><br/>
                    <span style="font-size:11px;">view gallery &raquo;</span>
                    </div>
                </div>
            </div>

worked it out. I was using .hover() incorrectly

<script language="javascript">
        $('.gallery-event').hover(
                function() {
                    $('#gallery-image').animate({opacity: '1'}, 500 ); $('.caption').animate({top:'-50px'}, 500 );
                },
                function() {
                    $('#gallery-image').animate({opacity: '0.4'}, 500 ); $('.caption').animate({top:'0px'}, 500 );
                }
            ) //Bind your events to a parent of the image and its caption.
        </script>

.hover handles both onmousehover and onmouseout

thankyou!

<div class='captionedImage' style="width:200px; height:158px;">
           <img id="gallery-image" style="opacity:0.4;" src="<?=__SITE_PATH?>images/pic21.jpg" alt="pic 21" />
           <div class="caption" style="position:relative; top:0px; background-color: #080808; opacity:0.8; width:287px; overflow:hidden;">Caption here</div>
        </div>

        <script language="javascript">
        $('.captionedImage').hover(
                function() {
                    $(this).animate({opacity: '1'}, 500 ); $('.caption').animate({top:'-50px'}, 500 );
                }
            ) //Bind your events to a parent of the image and its caption.

        $('.captionedImage').mouseout(
                function() {
                    $(this).animate({opacity: '0.4'}, 500 ); $('.caption').animate({top:'0px'}, 500 );
                }
            )
        </script>

Tried to do this with the second image, get the same problem though. Any other ideas?

If you encapsulate the image and the caption in a div that has the same dimensions as the image, then bind the element to that div you should no longer have this problem. The key is in making the event fire on a parent common to the image and the caption so that no matter which one your mouse is actually on, you’re still inside the box of the element with the hover event. Here’s a brief example:


<div class='captionedImage'>
   <img />
   <div class='caption'>Caption here</div>
</div>

<script>
$('.captionedImage').hover() 
//Bind your events to a parent of the image and its caption
//not the image itself.
</script>