jQuery动画-使图像从左到右可见

Question

我正试图使用jQuery隐藏一个图像。我正在使用.hide()函数。我正在将它应用于包含必须隐藏的图像的div。由于某种原因，它不起作用。我创造了一把小提琴。

是否可以使用animate，使图像在1秒内从右向左可见。换句话说，将宽度从0设置为最大值，但图像应从左向右可见。

Answer 1

您没有使用正确的语法。missing）；在每个功能结束时

$(document).ready(function() {
  $('#animate').click(function() {
      $('#myimage').animate({width: 'hide'},1000);
   });  
});

Answer 2

您可以在这里找到正在工作的jsFiddle。

几点：

• 在最初的fiddle中，您忘记使用终止)——这就是隐藏不起作用的原因
• 为了完成动画，我使用了盲jQuery放松。要使用此功能（以及其他功能），您需要引用jQueryUI库（就像我在小提琴中所做的那样）。我花了一段时间才弄清楚为什么效果不起作用，直到我勾选了左边的小复选框：）

为了记录在案，我还发布了小提琴上的代码：

$(document).ready(function() {
  $('#animate').click(function() {
      $('#myimage').toggle('blind', { direction: 'horizontal' }, 1000);
   });  
});

Answer 3

以下是您想要的：

http://jsfiddle.net/rAqcP/27/

请根据需要更改动画。

~K

Answer 4

我认为你不应该设置宽度的动画，因为调整图像大小时会看起来很奇怪。

你可以这样实现你想要的：

• 将容器（DIV#myimage）设置为overflow: hidden和position: relative：隐藏溢出将允许将图像向左移出容器
• 将图像设置为position: absolute，并向左移动图像以隐藏
• 将left属性设置回零的动画

演示

DEMO（带有css的初始状态）