在jQuery中上下动画和图像答案

【问题标题】：Animate and image up and down in jQuery在jQuery中上下动画和图像
【发布时间】：2012-07-17 05:44:48
【问题描述】：

我正在尝试使用 jQuery 上下动画和图像。

它的行为应该是这样的：

当页面加载时，它会显示 50% 的图像。如果有人点击图像，它会在页面上设置 div 动画。如果用户再次点击，它会移回页面下方。

html

 <div id="slidebottom" class="slide">
     <div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
 </div>

jQuery

$(document).ready(function() {
    $('.try').click(function() {
        $(".inner").animate({
            top: '-=100px'
        }, 2000);
    });
});

点击两次后如何反转动画？在我每次点击的那一刻，容器都会向上移动。

【问题讨论】：

标签： javascript jquery animation jquery-animate

【解决方案1】：

您可以尝试使用.toggle() 方法，该方法采用两个函数，并在单击时交替执行每个函数：

$(document).ready(function(){
  $('.try').toggle(function() {
    $(".inner").animate({top: '-=100px'}, 2000);
  }, function() {
    $(".inner").animate({top: '+=100px'}, 2000);
  });
});

不过，我个人会使用类和 CSS3 过渡。

【讨论】：

有可能无法在 Chrome 中运行动画吗？ FF 可以这样做，但是在 Chrome 中，首先单击图像后，图像会跳下来，然后动画起来，如果我再次单击而不是动画孔站点..crazy 效果
我在 Chrome、IE9、Safari 中尝试过...只有 FF 将其作为 ascpected 处理。

【解决方案2】：

试试this example。另请注意，为了使用 top css 属性，您应该使用 position: relatve; 或 position: absolute .inner div。

 var clicked = false
 $('.try').click(function () {
     if (clicked == true) {
         $(".inner").animate({
             top: '0px'
         }, 2000);
         clicked = false;
     } else {
         $(".inner").animate({
             top: '-100px'
         }, 2000);
         clicked = true;
     }
 });

【讨论】：

90% 的例子不适合我，但这个适合……

【解决方案3】：

只需在第一行下面放另一行代码，它就会按顺序为它们设置动画

$(document).ready(function() {
    $('.try').click(function() {
        $(".inner").animate({
            top: '-=100px'
        }, 2000);
        $(".inner").animate({
            top: '+=100px'
        }, 2000);
    });
});

【讨论】：