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

この種のことは 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 に答える
1

mouseout の代わりに mouseleave を使用します。

$("#box").mouseleave(function(){...});
于 2013-06-18T14:22:30.890 に答える
0

ミニボーイはボックスの親であるため、マウスイベントはミニボックスの上でも実行されます。これを試して：

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

または: http://jsfiddle.net/FE3jD/7/

于 2013-06-18T14:44:00.770 に答える