次の Jquery テキスト フライイン アニメーターがあります (以下のコードを参照)。ユーザーがアニメーション化されている要素のいずれかにカーソルを合わせると、アニメーションが停止するようになりました。また、フェードアウトする前に、最後の要素 (Text6) をもう少し一時停止したいと考えています。私は適用しようとしました:
if ($activeText.is('.lastClass'))
{$activeText.animate.delay(5000) OR $activeText.delay(5000)};
しかし、それは機能しません。最後の div でアニメーションを一時停止するにはどうすればよいですか?
Jクエリ:
<script type="text/javascript">
$(document).ready(function(){
$('.container .flying-text').css({opacity:0});
$('.container .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 = $(".container .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 = $('.container .flying-text:first'); //if it is last text, loop back to first text
// To fade all out
var $allText = $(".container 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 lastClass">Text6</div>
</div>
ありがとう!