Question

first some code:

I have many elements like that:

<section class="item>
     <div class="caption">
     </div>
</section>

the “caption” is hidden, when you go on the “item” the “caption” came in.

I did this before with hover() and worked fine, but now I need to have it live(), because I’m adding some more “item”s with an ajax() call.

What’s happening now is that when “caption” is showed, it takes precedence over item, because it is styled as absolute. Here some other code:

.caption {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: none;
}

I like this style because sometimes my “item” can have any size, and “caption” just follows it. But let’s go on.

Symptoms: when I mouse-enter on my “item” the caption shows, then instantly goes away, then goes in, then goes out. Like mad. I know why, I suppose it’s because my “caption” even if lives into “item” takes precedence, so “item” is no more in mouse-enter event. So “caption” leaves, and “item” fires another mouse-enter. And so on, until the end of time.

Here is my javascript, how can I say to live() to behave like it did before with hover()?

$('.item').live({
    mouseenter : function() {
        $(this)
        .find('.caption')
        .animate({
            opacity: 1,
            height: 'toggle'
            }, 'fast');

    },

    mouseout : function() {
        $(this)
        .find('.caption')
        .animate({
            opacity: 0,
            height: 'toggle'
        }, 'fast');     

    }

})  

thank you!

Answer 1

mouseout should be mouseleave to correctly mimic the $.fn.hover method.