Question

所以，我写了一个小页面：

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>  

    <script>  
       function slide() {  
          $("#d").slideUp("slow");  
          document.getElementById("d").innerHTML=Math.random();  
          $("#d").slideDown("slow");  
       }   
    </script>  

  </head>  
  <body>  

    <div id="d"></div>  
    <button onClick="slide()">do</button>  

  </body>  
</html>

我不知道为什么，但div内的文字在$("#d").slideDown("slow")之前更改，正好在slideUp开始时。我希望它能够工作，以便首先#d slideUp，然后当它的高度接近0或者内部HTML将改变时，并且仅在slideDown之后。

Answer 1

这样做：

function slide() {  
  $("#d").slideUp("slow", function() {
     $(this).html(Math.random).slideDown("slow");  
  });       
}

这里，回调函数中的代码在动画完成后被称为。在您的原始代码中，情况并非如此。动画开始后立即内容发生变化。

阅读有关.slideUp()
的文档
<强>更新

顺便说一下。 document.getElementById与jQuery中的$('#id')相同。您可以使用.html()功能。无需两次查找相同的元素。并且通过this在回调函数中提供了动画元素。

Answer 2

由于您使用的是jQuery，为什么不真正使用它？

$('#btnid').click(function() {
  $("#d").slideUp("slow");  
          $('#d').html(Math.random());  
          $("#d").slideDown("slow"); 
});

对您的代码进行一些改进

Answer 3

首先，因为您正在使用jQuery，请尝试changing the contents of #d using jQuery。此外，如果您需要在slideUp完成时进行内容更改，则需要在slideUp内的回调函数内执行此操作。

Answer 4

两种方式......

或使用队列或幻灯片回调功能

http://jsbin.com/otise/edit

jQuery表现得很奇怪

4 个答案: