jQuery - 图像动画(从右到左)

Question

有没有办法从右到左为图像设置动画，例如 this但相反:-

<span id="logo"></span>

#logo {
  background: url(https://upload.wikimedia.org/wikipedia/en/b/bd/Random_App_Logo.png);
  width: 0;
  height: 646px;
  display: block;
}

$('#logo').animate({ width:'100%' });

我已经尝试过:-

#logo {
  background: url(https://upload.wikimedia.org/wikipedia/en/b/bd/Random_App_Logo.png);
  width: 1350px;
  height: 646px;
  display: block;
  margin-left: 1350px;
}

$('#logo').animate({ marginLeft:'0px' }); 

但是图像需要保持在相同的位置。我会使用叠加层，但背景是背景图像，所以这不起作用。

Answer 1

您可以使用background-position: right center;将background-image对齐到div的右侧而不是左侧和 float: right; 将 div 设置为右侧。请参阅this

您也可以不使用 javascript DEMO