在jquery中制作动画时div的不当行为

Question

I trying to animate a small child div inside a parent div. And the animation is to move the child div -60px upwards when mouse enter to parent div and child div will return to its original position when mouse leave the parent div. And its working properly. But When the mouse move directly towards the child div it move up but get down before mouse leaving from the parent div. Please help me to solve this issue

See this link

My html code is

<div id="box" align="center">
    <div id="minibox"></div>
</div>

css code is

#box {
    position:relative;
    top:100px;
    width:200px;
    height:100px;
    border:1px solid #ddd;
}
#minibox {
    position:relative;
    width:50px;
    height:50px;
    border:1px solid #333;
    background-color:green;
}

jquery code is

$("#box").mouseenter(function () {
    ("#minibox").animate({
        top: "-60px"
    }, {
        duration: 180
    });
});
$("#box").mouseout(function () {
    $("#minibox").animate({
        top: "0px"
    }, {
        duration: 180
    });
});

Answer 1

使用mouseleave而不是mouseout。

$("#box").mouseleave(function(){...});

Answer 2

This kind of thing should NOT be done with jQuery.

Raw CSS:

#minibox { /* you can merge this with existing styles */
    top:0;
    transition: top 180ms ease;
    -webkit-transition: top 180ms ease;
}
#box:hover #minibox {
    top:-60px;
}

Demo

Answer 3

The miniboy is a parent of the box, so the mouse-event will be executed by overing the minbox too. try this:

if($(e.target).closest('#minibox').length)

or: http://jsfiddle.net/FE3jD/7/

Answer 4

Maybe you must be more specific on what happens in each case. Made this simple example, http://jsfiddle.net/blackjim/FE3jD/13/

var $box = $("#box"),
    $minibox = $("#minibox"),
    animationIsDone = false,
    miniBoxMoved = false,
    onDone;

$minibox.mouseenter(function (e) {
    if (miniBoxMoved) {
        e.stopPropagation();
    }
});

$box.mouseenter(function () {
    animationIsDone = false;
    miniBoxMoved = true;

    $minibox.animate({
        top: "-60px"
    }, {
        duration: 180,
        complete: function () {
            animationIsDone = true; // animation ended
            if (typeof onDone === 'function') {
                onDone();
            }
        }
    });

});

$box.mouseleave(function () {

    if (animationIsDone) {
        whenOutOfBox(); // call directly our callback
        onDone = ''; // not needed now
    } else {
        onDone = whenOutOfBox; //    pass it to the animation ending
    }
});


var whenOutOfBox = function () {
    $minibox.animate({
        top: "0px"
    }, {
        duration: 180,
        complete: function () {
            miniBoxMoved = false;
        }
    });
};