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 回答