jquery文本動畫定製幫助需要

Question

我有這個jquery滑動文本動畫。如果您看一下示例（http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/），則在進入後，飛入的活動文本會再次消失。我希望每個動畫文字在出現後都留在那裏，等待所有文字出現，然後所有文字應該消失並重新開始（基本上，不是每個文字在飛入後消失，而是直到最後一段文字才能看到元素已經出現，然後重新啓動所有以上）

的JavaScript：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.container .flying-text').css({ 
     opacity: 0 
    }); 
    $('.container .active-text').animate({ 
     opacity: 1, 
     marginLeft: "250px" 
    }, 4000); 
    var int = setInterval(changeText, 5000); 
    function changeText() { 
     var $activeText = $(".container .active-text"); 
     var $nextText = $activeText.next(); 
     if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first'); 
     $activeText.animate({ 
      opacity: 0 
     }, 1000); 
     $activeText.animate({ 
      marginLeft: "-100px" 
     }); 
     $nextText.css({ 
      opacity: 0 
     }).addClass('active-text').animate({ 
      opacity: 1, 
      marginLeft: "250px" 
     }, 3000, function() { 
      $activeText.removeClass('active-text'); 
     }); 
    } 
});​ 
</script> 

CSS

.container{ 

    width:500px; 
    margin:0 auto; 
    color:#FFF; 
    overflow:hidden; 
    } 

    .flying-text{ 
    margin-left:-100px; 
    color: #fff; 
    } 

HTML

<div class="container"> 
    <div class="flying-text active-text">I believe</div>       
    <div class="flying-text">I can</div>       
    <div class="flying-text">Fly</div>      
</div> 

感謝您的幫助

Answer 1

您需要將淡出，每次運行的代碼。

function changeText() { 

    var $activeText = $(".container .active-text"); 

    var $nextText = $activeText.next(); 
    if ($activeText.next().length == 0) { 
     $nextText = $('.container .flying-text:first'); 

     // To fade all out _ MOVED FROM OUTSIDE THIS IF 
     var $allText = $(".container div"); 
     $allText .animate({ 
      opacity: 0 
     }, 1000); 
     $allText .animate({ 
      marginLeft: "-100px" 
     }); 
    } 

    $nextText.css({ 
     opacity: 0 
    }).addClass('active-text').animate({ 
     opacity: 1, 
     marginLeft: "250px" 
    }, 3000, function() { 
     $activeText.removeClass('active-text'); 
    }); 
}​ 

這裏是一個jsfiddle來說明。

UPDATE
基於一些意見，我更新了fiddle向您展示如何使用jQuery UI的效果。