Question

我试图使用jquery为div设置动画，问题是动画没有传播＆＃34;对于它的孩子（如果我使用正确的术语，我真的不确定，我很抱歉＆＃34;）。请看看我的演示，当你将鼠标悬停在绿色框上时，它会执行代码，但是当你点击示例文本时，它会关闭..所以它会重新启动动画...希望我解释得对..先谢谢你们。

另外，任何人都可以分享他们如何掌握javascript或其库如jquery的经验吗？我真的想在这个特定的领域做得很好..

$('.js_boxFeature').on(" mouseenter", function () {     
    $(this).animate({
        "top": "-20px"
    }, "fast");
});


$('.js_boxFeature').on(" mouseout", function () {
    $(this).animate({
        "top": "0"
    }, "fast");
});

这是我的Fiddle

Answer 1

问题似乎是使用mouseout事件而不是mouseleave

$('.js_boxFeature').on("mouseleave", function () {
    $(this).stop(true).animate({
        "top": "0"
    }, "fast");
});

演示：Fiddle

Answer 2

请注意，您可以使用伪事件hover进/出处理程序，如下所示：

DEMO

$('.js_boxFeature').hover(function (e) {
    $(this).stop().animate({
        top: e.type === "mouseenter" ? "-20px" : 0
    }, "fast");
});

或仅使用CSS伪类:hover：

.js_boxFeature {
    position:absolute;
    width:200px;
    height:200px;
    background:green;
    top:0;
    -webkit-transition: top 200ms linear;
    transition: top 200ms linear;
}
.js_boxFeature:hover {
    top:-20px;   
}

Jquery事件传播？

2 个答案:

DEMO

DEMO CSS