jQuery 边距动画只运行一次

Question

我使用了 this 页面中的 jQuery 动画。

这是我的代码：

/** ANIMATE FRONTPAGE ELEMENT **/
$(".frontpage-element-wrap").hover(function(){
    if (!$('.scroll-fade-in-2', this).hasClass('animated')) {
        $('.scroll-fade-in-2', this).dequeue().stop().animate({ 'margin-left': "0px" });
    }
}, function() {
    $('.scroll-fade-in-2', this).addClass('animated').animate({ 'margin-left': "60px" }, "normal", "linear", function() {
        $('.scroll-fade-in-2', this).removeClass('animated').dequeue();
    });
});

.scroll-fade-in-2原来的CSS就是margin-left: 60px;

为什么它只按计划运行一次，然后下一次悬停时，它就不起作用了。

Answer 1

我建议你使用CSS而不是jQuery，因为通过css你可以获得更好的动画并且可以更优化。这是 css 的示例： https://jsfiddle.net/linkers/kh7qhx2g/4/

#frontpage-element-wrap{
  height: 200px;
  width: 400px;
  background-color: #aeaeae;
}
.scroll-fade-in-2{
  width: 200px;
  height: 200px;
  background-color: #000;
  margin-left: 60px;
  transition-duration: 1s;
}
#frontpage-element-wrap:hover .scroll-fade-in-2{
  margin-left: 0;
}

jQuery 边距动画只运行一次

jQuery margin animation only runs once

javascript

jquery

margin

jquery-animate