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 过渡。

Answer 2

试试这个例子。另请注意，为了使用topcss 属性，您应该使用divposition: relatve;或div。position: absolute.inner

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

Answer 3

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

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