0
特定の種類のアニメーションを実現しようとしていますが、間違いがあります。Jquery slidein左右の複数の要素をもう一度ループして返します
私は私が達成しようとしています何から始めましょう:
私は(スタックなど)3つのH2タグ要素を持って、最初のH2は、開始時にフェードインして左から右へのスライド、2番目のH2が完了します同じシーケンスの後に3番目の要素が続き、3つの要素がすべてアニメーション化されると、それぞれが右にスライドしてフェードアウトし、その後全体のシーケンスがループバックに戻ります。
私は大まかに次のように試しましたが、これを行う良い方法があると確信しています...これは真の初心者の試みです。
<body>
<div class="fade-right-1">
<div class="container">
<div class="photo-text">
<span>All rights to NASA</span>
</div>
</div>
</div>
<div class="fade-right-2">
<div class="container">
<div class="photo-text">
<span>All rights to NASA</span>
</div>
</div>
</div>
<div class="fade-right-3">
<div class="container">
<div class="photo-text">
<span>All rights to NASA</span>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function() {
function animateDivers() {
$(".fade-right-1").animate({
left: 200,
opacity: "show"
}, 1500);
$(".fade-right-2").delay(1000).animate({
left: 200,
opacity: "show"
}, 1500);
$(".fade-right-3").delay(2000).animate({
left: 200,
opacity: "show"
}, 1500);
$(".fade-right-1,.fade-right-2,.fade-right-3").delay(2000).animate({
left: 500,
opacity: "hide"
}, 1500, animateDivers, 2500);
}
animateDivers();
});
</script>
このためそこにプラグイン上の任意のヘルプやアドバイスは感謝していただければ幸いです。
使用しているCSSに簡単にコメントしてください。 'left'はあなたが' left:500px'のように使う測定単位を指定する必要があります。私は 'opacity: 'hide'を使うべきではないと確信しています。 Fアニメーション機能を読み込みます。 http://api.jquery.com/animate/そこにアニメーションの完成後に新しい機能をトリガーする方法も説明します)。それが役に立てば幸い。 – RMo