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