javascript - JQuery 图像轮播动画，以一种方式工作，但不能以另一种方式工作

Question

代码很短，如下:

http://jsfiddle.net/L4Ry3/170/

$(document).ready(function(){
  $('#previous_frame').on("click",function(){
        var $last = $('.frames li:last-child')
        $('.frames').prepend($last)
        $last.css({left:'-33%'})
        $last.animate({left:'0%'})
    });

    $('#next_frame').on("click",function(){
        var $first = $('.frames li:first-child');
        $('.frames').append($first);
        $('.frames li:first-child').css({right:'-33%'});
        $('li:first-child').animate({right:'0%'})
    });
})

如果我单击左键，它会缓慢移动图像。当我单击右侧时，图像会立即切换到合适的位置。我不明白为什么会这样。

Answer 1

这是因为您添加的 left 规则。它保持为 0。您可以注意到它首先工作，然后停止为您单击左侧的图像工作，但继续为其余工作工作。

在next_frame函数中添加

$('.frames li:first-child').css({left:''});

删除 left。

您可以在 this fiddle 中看到它在工作.

通过点击左键来测试它，然后再次点击右键。

深入了解

显然 left 风格规则比 right 更占优势。当你同时拥有这两个时，它只考虑 left，因此虽然 right 是动画的，但它保持在 0% 左边。删除 left 规则允许 css 引擎考虑 right 并显示所需的动画。