0

我试图在父 div 中为一个小的子 div 设置动画。并且动画是当鼠标进入父div时子div向上移动-60px，当鼠标离开父div时子div会回到原来的位置。并且它工作正常。但是当鼠标直接向子 div 移动时，它会向上移动，但在鼠标离开父 div 之前会向下移动。请帮我解决这个问题

看到这个链接

我的html代码是 

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

CSS代码是

#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代码是

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

4 回答 4

1

使用 mouseleave 而不是 mouseout。

$("#box").mouseleave(function(){...});
于 2013-06-18T14:22:30.890 回答
1

这种事情不应该用 jQuery 来完成。

原始 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;
}

演示

于 2013-06-18T15:04:04.010 回答
0

也许您必须更具体地了解每种情况下会发生什么。做了这个简单的例子，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;
        }
    });
};
于 2013-06-18T15:10:09.877 回答
0

miniboy 是 box 的父级，因此鼠标事件也将通过覆盖 minbox 来执行。尝试这个：

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

或：http: //jsfiddle.net/FE3jD/7/

于 2013-06-18T14:44:00.770 回答