Question

我正在尝试使用jQuery隐藏隐藏的图像。我正在使用.hide()函数。我将它应用于包含必须隐藏的图像的div。它由于某种原因不起作用。我有created a fiddle。

是否可以使用animate，以便图像从右到左显示，例如1秒。换句话说，将宽度从0设置为最大值，但图像应从左到右可见。

Answer 1

你没有使用正确的syntax.missing）;在每个函数的末尾

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

Answer 2

你可以找到工作的jsFiddle here。

几点：

在您的原始小提琴中，您忘记使用终止) - 这就是为什么隐藏不起作用。
为了完成动画，我使用了blind jQuery缓动。要使用它（以及其他缓动），您需要引用jQuery UI库（就像我在小提琴中所做的那样）。我花了一段时间才弄清楚为什么效果不起作用，直到我勾选左侧的小复选框:)

只是为了记录，我还发布了小提琴的代码：

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

Answer 3

这是你想要的：

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

请根据需要更改动画。

〜ķ

Answer 4

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

你可以达到你想要的效果：

将容器（DIV＃myimage）设置为overflow: hidden和position: relative：隐藏溢出将允许将图像移动到容器外的
将图片设置为position: absolute并将图片移到左侧以隐藏
将left属性设置回归零

<强> DEMO

<强> DEMO (initial state with css)

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

4 个答案: