Javascript easeOutBounce效果并不总是应用

简单地说，我有一个

div

，当我点击一个按钮时，它应该是动画，当我点击另一个按钮时，它应该是隐藏的：

<div id="popup"></div>
<input type="button" value="show and animate popup" onClick="showWithAnimation()" />
<input type="button" value="hide" onClick="aFunction()" />



<script>           
function showWithAnimation(){    

               console.log('animation called');
               $('#popup') .animate({top:(($(window).height()/2)-($('#popup').outerHeight()/2))-70}, 1000, 'easeOutBounce');
           $('#popup').show();
           }

         function aFunction(){//Hide the div

              $('#popup').hide();

          }
</script>

函数showWithAnimation（）{
log（'animation called'）；
$（'popup'）.animate（{top:（$（window.height（）/2）-（$（'popup'）.outerHeight（）/2））-70}，1000，'easeOutBounce'）；
$（'弹出窗口'）.show（）；
}
函数affunction（）{//隐藏div
$（'弹出'）.hide（）；
}

---

我注意到，反弹效果仅在我第一次单击

显示并设置弹出窗口的动画时应用于
div
，然后当我单击
隐藏
按钮，然后再次单击
显示并设置弹出窗口的动画
按钮时，会显示
div
，但是没有
easeOutBounce
效果。我可以问你怎么解决这个问题吗？Thanx提前。
动画没有出现的原因是div已经在它的最终目的地，因此当它尝试设置动画到该目的地时，它不会移动

如果不只是隐藏div，而是将其动画设置回其原始位置，甚至在隐藏后使其跳回其原始位置，则动画中的反弹将以您希望的方式再次发生

此外，您将希望在设置div动画之前显示它，而不是之后

一些其他注释：

在HTML文件中不使用内联代码通常被认为是最佳实践。相反，您可能希望使用引用ID或类的外部文件来应用事件处理程序。这不仅使HTML和javascript更易于阅读和遍历，而且允许在事后进行更轻松的更改

HTML文件

我认为这是因为当动画运行时，div在页面上的某个位置…但是当您重新运行它时，div已经在目标位置…因此看起来没有动画/效果发生。它正在发生，它只是已经在你试图动画它。您需要首先将
顶部
和
左侧
样式设置为特定值…可能是窗口的中上部。然后，调用
animate
，就像你一样。这样，每当单击以显示弹出窗口时，弹出窗口的位置始终从同一位置开始，并在同一位置设置动画/结束

因此，您需要：

$("#popup").css({"top": "whatever", "left": "whatever"}).animate("whatever", "whatever", "whatever").show();

更新：

使用“动画制作”

时，它会根据选定元素的原始值制作选定元素的动画，以获得您传递给它的属性。因此，在您的例子中，您正在设置

顶部

和

左侧

样式的动画。默认情况下，DIV被定位在页面的某个地方——我想是你的，它隐藏在HTML的中间某个地方。所以从技术上讲，

top

和

left

是未定义的，但实际上是一些有限值，比如“200250”。当您调用animate时，它会逐渐将这些内容从原始（200250）更改为您在

animate

调用中指定的内容。因此，在第一次调用

animate

之后，您将div移动（设置动画）到窗口的中心。然后允许关闭（隐藏）弹出窗口。每次点击打开弹出窗口之后，它都会尝试将div移动（动画化）到窗口的中心…但它已经在那里了（只是隐藏了）。因此“没有”动画，因为它试图将div移动到它已经处于的位置。同样，正如您在测试中所注意到的，需要注意的是，这只会在第一次之后发生，因为div已经移动到其目标位置。如果您打开弹出窗口，关闭它，调整窗口大小，然后再次打开弹出窗口，我相信会出现某种动画（至少可能）。这是因为您在

animate

调用中指定的div的动态目标位置已更改（因为窗口已调整大小）。

Thanx对于这一点，它是有效的，尽管我不太理解您的解释。我更新了答案，我希望它能帮助解释发生了什么。关键是，即使在关闭div时它是隐藏的，但它仍然处于为

动画

指定的目标位置。

$( document ).ready( function() { // runs code once the DOM has loaded
   var $popup = $( '#popup' );

   $( '#showButton' ).click( function() {
      $popup.show();
      $popup.animate( {
         top: ( ( $( window ).height() / 2 ) - ( $popup.outerHeight() / 2 ) ) - 70
      }, 1000, 'easeOutBounce' );
   } );

   $( '#hideButton' ).click( function() {
      // move back to original position here.
      $popup.hide();
   } );
} );

$("#popup").css({"top": "whatever", "left": "whatever"}).animate("whatever", "whatever", "whatever").show();