内部div的事件累积来自外部div的事件数

Question

I have an html markup that looks like this:

<div class="student">

    <div class="student-main-image">  
        <div id="student-image-154"><img src="http://goo.gl/5wMt0o"></div>
    </div>

    <div class="student-info">
        Johnna Smith
    </div>

</div>

What I am trying to do is to simply slide in and out the inner div that contains some text. Slide in the inner div if the parent container is hovered and slide it out otherwise but maintain the inner div from being displayed if it is hovered right after the main div was hovered.

I am able to accomplish sliding in and out the inner div if the parent div is hovered but I can't figure out why the inner div continuously slides up and down when it is hovered right after the parent div.

Is there something that I'm missing?

Here is my current js code:

$(".student .student-main-image").hover(function () {

    $(this).next().slideDown("fast");
    console.log('in');

}, function(){

    $(this).next().hover(function () {
        $(this).slideDown("fast");
        console.log('in');
    }, function(){
        $(this).slideUp("fast");
        console.log('out');
    }); 

    if($(this).next().is(":visible")) {
        $(this).next().slideUp("fast");
        console.log('hide it');
    } else {
        console.log('nothing to hide');
    }

}); 

Fiddle: http://jsfiddle.net/9857R/1/

Answer 1

You need to look at the html tree. When you open the text element with your mouse over it your mouse is leaving the image element.

This causes the text to slide down putting your mouse back over the image element causing it to then slide up and you get stuck in a perpetual loop.

Use the main container that holds both to bind the events to. Since the text element is contained within the main element, hovering the child doesn't cause issues because mouse never left the parent

Then you can reduce your code down to:

$(".student ").hover(function () {          
    $(this).find('.student-info').stop(true,true).slideToggle("fast");    
}); 

stop() is used to prevent queuing of events should you end up moving mouse again before animation is completed

DEMO