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来说明。

<强>更新
根据一些评论，我更新了fiddle以展示如何使用jQuery UI效果。

需要Jquery Text动画自定义帮助

1 个答案: