Question

代码很短，这里是：

$(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并显示所需的动画。

Answer 2

将下一帧点击事件中的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
});
})

working fiddle

JQuery图像轮播动画，工作方向是一种方式而不是另一种方式

2 个答案:

深度