Question

我正在尝试在鼠标悬停上设置边框动画：

$('.feature').mouseover(function(){
    border = $(this).find('.features_icon img');
    border.stop(true,true).animate({ borderColor: "#add423"  }, 'slow'); 
});
$('.feature').mouseout(function(){
    border = $(this).find('.features_icon img');
    border.animate({ borderColor: "transparent"  }, 'slow'); 
});

但是当我过快地悬停在.feature元素上时，动画效果不会发生，它只会显示它。我假设这里有问题，也许是stop（）函数。如何正确完成它才能使其正确动画？

Answer 1

使用mouseover和mouseout时出现问题，因为当您将光标移动到子元素时会触发它们...所以请尝试使用mouseenter和mouseleave （或快捷方式hover()）

像

jQuery(function ($) {
    $('.feature').mouseenter(function () {
        var border = $(this).find('.features_icon img');
        border.stop(true, true).animate({
            borderColor: "#add423"
        }, 'slow');
    });
    $('.feature').mouseleave(function () {
        var border = $(this).find('.features_icon img');
        border.animate({
            borderColor: "transparent"
        }, 'slow');
    });
});

演示：Fiddle

但css3 animation会更容易像

.features_icon img {
    border-width:5px;
    border-style:solid;
    transition : border 1s ease-out; 
}

.feature:hover .features_icon img {
    border-color:#add423;
}

演示：Fiddle

鼠标悬停时的间歇动画

1 个答案: