1

简单地说，当我点击一个按钮时，我有一个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效果。我可以问你如何去解决这个问题吗？提前谢谢。

4

2 回答 2

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();
   } );
} );
于 2012-09-25T16:39:12.990 回答
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调用中指定的内容。所以，在 FIRST 之后animate调用，您将 div 移动（动画）到窗口的中心。然后您允许关闭（隐藏）弹出窗口。之后每次单击打开弹出窗口，它都会尝试将 div 移动（动画）到窗口的中心......但它已经存在（只是隐藏）。所以“没有”动画，因为它试图将 div 移动到它已经在的位置。同样，正如您在测试中注意到的那样，重要的是要注意这仅在第一次之后发生，因为 div 有已经被移动到它的目标位置。如果您打开弹出窗口，关闭它，调整窗口大小，然后再次打开弹出窗口，我敢肯定会有某种动画（至少可能）。animate

于 2012-09-25T16:40:40.603 回答