jquery - 使用 jQuery 进行奇怪的百分比计算

Question

我的页面上有一个轮播，有点搞笑。尽管我的 jsfiddle 工作顺利，但它在我的网站上的运行方式却大不相同。

这是一个时髦的网站：http: //drainteractive.com/conceptstudio/

这是工作的jsfiddle：http: //jsfiddle.net/ExRR7/13/

我的 functions.js 文件中的代码与 jsfiddle 中的代码完全相同：

$('.move-left').click(function(){
$('.belt').animate({right: '-=50%'}, 0);
});

$('.move-right').click(function(){
$('.belt').animate({right: '+=50%'}, 0);
});

然而，在网站上，当我第二次点击其中一个箭头时，事情变得很奇怪。在最初的 50% 跳跃之后，belt.div向右移动了大约 600%。然后大约 3000%。

有谁知道这可能是什么原因造成的？

编辑：好的，jsfiddle 有 +/-=25% 而不是 50%，但这不是导致问题的原因。

Answer 1

我无法测试，但这应该可以

   var count = 0;

   $('.move-left').click(function(){
      count -= 50;
      $('.belt').animate({right: count + '%'}, 0);
   });

   $('.move-right').click(function(){
      count += 50;
      $('.belt').animate({right: count + '%'}, 0);
   });

是的，就像 Jason P 说的那样。当您.belt第一次制作动画时，值right将是自动的。所以 jQuery add 的50%jQuery 使用getComputedStyle（如果我是对的）来获取 right 的值，所以虽然 style 属性将50% getComputedStyle返回值px

Answer 2

尝试这个：

$('.move-left').click(function() {
    var width = $('.belt li').width() + 44 + 'px'; // li width + padding
    $('.belt').animate({right: '-=' + width}, 0);
});

$('.move-right').click(function() {
    var width = $('.belt li').width() + 44 + 'px'; // li width + padding
    $('.belt').animate({right: '+=' + width}, 0);
});