Question

我有一个应用于div的jquery fly-in文本动画师。现在div只能是一定的大小，因此允许一定量的文本行。现在我想为动画添加更多行文本，基本上替换当前文本，然后再循环回到第一个文本行。检查我的代码，看看我的意思：

JQuery的：

<script type="text/javascript">

$(document).ready(function(){

    $('.flying1 .flying-text').css({opacity:0});
    $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1500); //animate first text
    var int = setInterval(changeText, 2000);    // call changeText function every 5 seconds

function changeText(){  
    var $activeText = $(".flying1 .active-text");     //get current text    
    var $nextText = $activeText.next();  //get next text
    /*if($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

    $activeText.animate({opacity:0}, 1000);
    $activeText.animate({marginLeft: "-100px"});*/

     if ($activeText.next().length == 0) {
        $nextText = $('.flying1 .flying-text:first'); //if it is last text, loop back to first text

        // To fade all out
        var $allText = $(".flying1 div");
        $allText .animate({
            opacity: 0
        }, 1000);
        $allText .animate({
            marginLeft: "-100px"
        });
    }

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "0px"}, 1500, function(){

        $activeText.removeClass('active-text');                                           
    });
}
});
</script>

HTML：

<div class="flying1">
  <div class="flying-text active-text">Text1</div>                  
  <div class="flying-text">Text2</div>                      
  <div class="flying-text">Text3</div>
  <div class="flying-text">Text4</div>
  <div class="flying-text">Text5</div>  
  <div class="flying-text">Text6</div>                   
</div>

这是由于空间限制而Div（.flying1）可以采取的最大文本量... 我想在Text1-6之后运行的文本动画中添加另外6行，所以它们基本上是Text7-12在与Text1-6相同的空间中运行...

谢谢!!

JQuery文本动画 - 如何用新的文本值替换当前文本值

0 个答案: