需要 Jquery 文本动画自定义帮助

Jquery Text Animation customization help needed

本文关键字：自定义 帮助 动画 文本 Jquery 需要      更新时间：2023-09-26

我有这个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>

谢谢你的任何帮助

您需要移动每次运行的淡出代码。

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效果。

相关文章：