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>

我注意到，只有在我第一次点击div时才会在show and animate popup上应用退回效果，然后点击hide按钮然后重新启动再次点击show and animate popup按钮，会显示div，但不会产生easeOutBounce效果。我可以问你怎么解决这个问题吗？提前完成。

Answer 1

动画未发生的原因是因为div已经在它的最终目的地，因此当它试图动画到该目的地时，它就不会移动。

如果不是隐藏div，而是将其动画回原始位置，或者甚至只是让它在隐藏后跳回到原始位置，动画中的反弹会再次按照您希望的方式再次出现

此外，您需要在动画之前显示div，而不是之后。

其他一些说明：

通常认为最佳做法是不在HTML文件中使用内联代码。相反，您可能希望使用引用ID或类的外部文件来应用事件处理程序。这不仅使您更容易阅读和遍历HTML和JavaScript，而且可以在事后更容易地进行更改。

HTML文件

<script src="externaljsfile.js"></script>
<div id="popup"></div>
<input id="showButton" type="button" value="show and animate popup" />
<input id="hideButton" type="button" value="hide" />

JS文件

$( 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();
   } );
} );

Answer 2

我认为这种情况正在发生，因为当动画运行时，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”。当您调用动画时，它会逐渐将其从原始（200,250）更改为您在animate调用中指定的内容。因此，在第一次animate调用之后，您将div移动（动画）到窗口的中心。然后，您可以关闭（隐藏）弹出窗口。每次点击打开弹出窗口之后，它都会尝试将div移动（动画）到窗口的中心......但它已经存在（只是隐藏）。所以“不是”动画，因为它试图将div移动到它已经存在的位置。再次，正如你在测试中注意到的那样，重要的是要注意这只是在第一次发生之后因为div有已经被移到目标位置。如果您打开弹出窗口，关闭它，调整窗口大小，然后再次打开弹出窗口，我相信会有某种动画（可能很少）。这是因为您在animate调用中指定的div的动态目标位置已更改（因为窗口已调整大小）。

并不总是应用easeOutBounce效果

2 个答案: