javascript - 在 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。