jquery フライイン テキスト アニメーターを div に適用しています。現在、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 と同じスペース...
ありがとうございました!!