2

代码很短，这里是：

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%'})
    });
})

如果我单击左键，它会慢慢移动图像。当我单击右侧时，图像会立即切换到位。我不明白为什么会发生这种情况。

4

2 回答 2

2

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

在next_frame函数中添加

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

删除它left。

你可以看到它在这个 fiddle中工作。

通过完全单击左，然后再次单击右来测试它。

深入

显然left样式规则比right. 当你同时拥有它时，它只考虑left，所以虽然right是动画，但它保持在 0% 左侧。删除left规则允许 css 引擎考虑right并显示所需的动画。

于 2013-05-26T06:07:03.330 回答
0

在您的下一帧点击事件中更改为..right这应该可以解决问题left-+

尝试这个

$(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({left:'33%'}); //<----here
    $('li:first-child').animate({left:'0%'})//<----here
});
})

工作小提琴

于 2013-05-26T06:02:41.747 回答