在jQuery中上下动画和图像

Posted 2023-05-08

【中文标题】在jQuery中上下动画和图像

【英文标题】：Animate and image up and down in jQuery

【发布时间】：2012-07-17 05:44:48

【问题描述】：

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

它的行为应该是这样的：

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

html

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

jQuery

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

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

【参考方案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);
    );
);