在 jQuery 中上下动画和图像

Question

我正在尝试使用 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);
    });
});

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

Answer 1

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

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

然而，我个人会使用类和 CSS3 Transitions。