如何从.fadeOut效果回调中使用.animate的持续时间设置？

我试图淡出section#secondary的内容，一旦内容淡出，父级（section#secondary）应该在滑块动画中为“关闭”设置动画。如何从.fadeOut效果回调中使用.animate的持续时间设置？

所有这些工作，但持续时间不是，我不明白为什么。

这里是我的代码：

HTML

<section id="secondary"> 
    <a href="#" class="slide_button">&laquo;</a> <!-- slide in/back button -->    
    <article> 

     <h1>photos</h1> 
     <div class="album_nav"><a href="#">photo 1 of 6</a> | <a href="#">create an album</a></div> 
     <div class="bar"> 
      <p class="section_title">current image title</p> 
     </div> 

     <section class="image"> 

      <div class="links"> 
       <a class="_back album_link" href="#">« from the album: james new toy</a> 
       <nav> 
        <a href="#" class="_back small_button">back</a> 
        <a href="#" class="_next small_button">next</a> 
       </nav> 
      </div> 

      <img src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/images/sample-image-enlarged.jpg" width="418" height="280" alt="" /> 

     </section> 

    </article> 

    <footer> 
     <embed src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/flash/secondary-footer.swf" wmode="transparent" width="495" height="115" type="application/x-shockwave-flash" /> 
    </footer> 

</section> <!-- close secondary -->

jQuery的

// ============================= 
// = Close button (slide away) = 
// ============================= 
$('a.slide_button').click(function() { 
    $(this).closest('section#secondary').children('*').fadeOut('slow', function() { 
     $('section#secondary').animate({'width':'0'}, 3000); 
    }); 
});

由于section#secondary的内容是可变的，我用的是*选择。

会发生什么事是，fadeOut使用适当slow速度，但一旦回调火灾（一旦内容淡出）的section#secondary动画播放至width: 0几毫秒之内，而不是3000毫秒（3秒）我将动画持续时间设置为。

任何想法，将不胜感激。

PS：我不能在此处发布示例，但由于这更多是jQuery理论的问题，所以我不认为这里需要示例。 纠正我，如果我错了..

来源

2010-05-11 Jannis

每一级子触发一次，因此3次这不是我仅与该代码看到的行为：http://jsfiddle.net/ eKeQ2 /外部/附加内容必须在您的实际页面上进行。应该检查'$（'section＃secondary：not（：animated）'）'，因为你正在为每个褪色的孩子开始动画而不是一次。 – 2010-05-11 10:32:46

我更新了我的答案。我猜这是因为你没有为'＃secondary'设置任何大小的属性，所以当它的内容被删除时，它会自动崩溃。我的新答案（如下）在点击时静态设置其大小，并在动画之前。 – user113716 2010-05-11 11:41:54

我相信这里至少一个潜在的问题是，从.fadeOut()回调（然后调用.animate()），可以从.children('*')当选的儿童人数多次执行。这可能需要重做，回调只能执行一次。

来源

2010-05-11 03:05:04 awgy

确定宽度已更改为0？运行下面的示例我可以看到宽度不是0，直到第一个回调被触发。

注意回调这个样本

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript"> 

      $(document).ready(function() { 
       $('a.slide_button').click(function() { 
        $('div#secondary').children().fadeOut('slow',function(){ 
         // this has scope of the html element 
         console.log(this); 
         console.log($(this).parent().width()); 
         $(this).parent().animate({'width':'0'}, 3000, function(){ 
          console.log($(this).width()); 
         }); 
        }); 
       }); 
      }); 

     </script> 
    </head> 
    <body> 

     <div id="secondary" style="background: red;">   
      <a href="#" class="slide_button">&laquo;</a> <!-- slide in/back button --> 
      <div> 

       <h1>photos</h1> 
       <div class="album_nav"><a href="#">photo 1 of 6</a> | <a href="#">create an album</a></div> 
       <div class="bar"> 
        <p class="section_title">current image title</p> 
       </div> 

       <div class="image"> 

        <div class="links"> 
         <a class="_back album_link" href="#">« from the album: james new toy</a> 
         <nav> 
          <a href="#" class="_back small_button">back</a> 
          <a href="#" class="_next small_button">next</a> 
         </nav> 
        </div> 

       </div> 

      </div> 

      <div> 
       <p>Footer</p> 
      </div> 

     </div> 

    </body> 
</html>

来源

2010-05-11 03:26:47 Jonathan

如何从.fadeOut效果回调中使用.animate的持续时间设置？

回答

相关问题