javascript - easeOutBounce 效果并不总是适用

Question

简单地说，我有一个 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>

我注意到，弹跳效果仅在我第一次点击 show and animate popup 时才应用于 div，然后当我点击hide 按钮，然后再次点击 show and animate popup 按钮，显示 div，但没有 easeOutBounce 效果。我可以问你怎么去解决吗？提前致谢。

Answer 1

我认为发生这种情况是因为当动画运行时，div 在页面上的某个位置......但是当你重新运行它时，div 已经在目标位置......所以它看起来像没有动画/效果正在发生。它正在发生，它已经在您尝试将其动画化到的位置。您需要首先将 top 和 left 样式设置为特定值...可能是窗口的顶部中间。然后，您像现在一样调用 animate。这样，每当您单击以显示弹出窗口时，弹出窗口的位置总是从同一位置开始，并在同一位置进行动画/结束。

所以你需要:

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

更新:

当您使用animate 时，它实际上是将所选元素从其原始值动画化，以具有您传递给它的属性。因此，在您的情况下，您正在为 top 和 left 样式设置动画。默认情况下，div 位于页面上的某个位置——我认为对于你的，它是隐藏的，就在你的 HTML 中间的某个位置。所以从技术上讲，它的 top 和 left 是未定义的，但实际上是一些有限值，例如“200、250”。当您调用 animate 时，它​​会逐渐将这些值从原来的 (200, 250) 更改为您在 animate 调用中指定的值。因此，在第一个 animate 调用之后，您将 div 移动(动画化)到窗口的中心。然后您允许关闭(隐藏)弹出窗口。之后每次单击打开弹出窗口时，它都会尝试将 div 移动(动画)到窗口的中心......但它已经在那里(只是隐藏)。所以“没有”动画，因为它试图将 div 移动到它已经存在的位置。同样，正如您在测试中注意到的那样，重要的是要注意这只在第一次之后发生，因为 div 有已经移动到目标位置。如果您打开弹出窗口，关闭它，调整窗口大小，然后再次打开弹出窗口，我敢肯定会有某种动画(极有可能)。这是因为您在 animate 调用中指定的 div 的动态目标位置已更改(因为窗口已调整大小)。