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。

Answer 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;
     }
 });

Answer 3

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

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

Jquery - 上下动画和图像

3 个答案: