0

この 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>

助けてくれてありがとう

4

1 に答える 1

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を次に示します。

更新
いくつかのコメントに基づいて、フィドルを更新して、 jQuery UI 効果を使用する方法を示しました。

于 2012-06-12T21:01:39.747 に答える