如何制作“动画”使用 jquery 运行相反的方向

Question

这是我的代码：

$('#map_canvas').animate({width:'69.8%'},300);

这将从左到右运行，

如何使其从右到左运行？

谢谢

Answer 1

你可以这样做：

$('#map_canvas').each(function() {
  var newLeft = $(this).width() * .302;
  $(this).animate({left: newLeft, width:'69.8%'},300);
});

你可以在这里尝试一下，我放慢了速度10 倍以更好地看到效果。我们所做的就是计算元素的宽度 * 30.2%，以查看它应该向左移动多远，并同时为该属性设置动画。所有元素需要至少是 position:relative 才能正常工作。

上面的代码应该适用于所有情况，但这个更简单的版本也适用于大多数情况：

$('#map_canvas').animate({left: '30.2%', width:'69.8%'}, 300);

Answer 2

要将其从右向左滑回，请再次将其宽度设置为 0：

$('#map_canvas').animate({width:'0'},300);