如何從.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的持續時間設置？

回答

相關問題