easeOutBounce效果并不总是适用

只要我有一个div应该当我点击一个按钮，当我在另一个按钮，点击进行动画和隐藏：easeOutBounce效果并不总是适用

<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显示，但没有效果。我可以问你如何去解决这个问题吗？提前Thanx。

来源

2012-09-25 Malloc

我认为这正在发生，因为在运行时的动画，股利是在页面上的特定位置..但是当你重新运行它时，div已经在目标位置......所以看起来没有动画/效果。它正在发生，它已经是你试图给它制作动画的地方。您需要首先将top和left样式设置为特定值...也许是窗口的顶部中间。然后，你像你一样打电话给animate。这样，无论何时单击以显示弹出窗口，弹出窗口的位置始终始于相同的位置，并在相同的位置进行动画/结束。

所以，你将需要：

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

UPDATE：

当您使用animate，它从字面上其原始值动画选定的元素（S）有传递给它的属性。所以在你的情况下，你正在动画top和left样式。默认情况下，div位于页面的某个位置 - 我认为与你的相同，它隐藏在HTML中间的某个位置。所以在技术上，它是top和left是未定义的，但实际上是一些有限的值，如“200,250”。当您调用动画时，它会逐渐将原始内容（200,250）更改为您在animate调用中指定的内容。因此，在FIRST animate调用之后，您将div移动到窗口的中心（动画）。然后你允许关闭弹出窗口（隐藏）。每次点击后打开弹出窗口，它会尝试移动（动画）div到窗口中心......但它已经在那里（只是隐藏）。因此，“不是”动画是因为它试图将div移动到它已经存在的位置。再次，正如您在测试中注意到的，重要的是要注意，这仅在第一次后才会发生，因为div有已经移到目标位置。如果你打开弹出窗口，关闭它，重新调整窗口大小，然后再次打开弹出窗口，我确信会有某种动画（极小可能）。这是因为您在animate调用中指定的div的动态目标位置已更改（因为窗口已调整大小）。

来源

2012-09-25 16:40:40 Ian

Thanx为此，它的工作原理，虽然我不明白你的解释。你能否以其他方式重新解释:) – Malloc

我更新了答案，希望能帮助解释发生了什么。关键是，即使div关闭时它仍然处于隐藏状态，它仍然处于您为“animate”指定的目标位置。 – Ian

动画不会出现的原因是因为div已经在它的最终目的地，所以当它尝试动画到目的地时，它根本不会移动。

如果不是隐藏div，而是将其重新设置为原始位置，或者在隐藏后跳回原始位置，动画中的反弹将以您喜欢的方式再次发生至。

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

其他一些注意事项：

它通常被认为是最好的做法，是不会在HTML文件中使用内嵌代码。相反，您会希望使用引用ids或类的外部文件来应用事件处理程序。这不仅使得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-25 16:39:12 dqhendricks

Thanx a million :) – Malloc

easeOutBounce效果并不总是适用

回答

相关问题