0

jquery を使用して、画像が表示されてから次々と非表示になる小さなアニメーション効果を作成しようとしています。私のコードでは、すべての画像が一度に表示され、1 つずつ非表示になります。助けてください。ありがとう

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hide1").delay(2050).hide(1);
    $('.show1').delay(2000).show(1);
    $(".hide2").delay(2550).hide(1);
    $('.show2').delay(2500).show(1);
    $(".hide3").delay(2550).hide(1);
    $('.show3').delay(3000).show(1);
    $(".hide4").delay(3550).hide(1);
    $('.show4').delay(3500).show(1);
    $(".hide5").delay(4050).hide(1);
    $('.show5').delay(4000).show(1);

});
</script>
</head>

<body>
<img class="hide1" class="show1" style="position:absolute; top:300px; left:300px;" src="9.png" />
<img class="hide2" class="show2" style="position:absolute; top:260px; left:340px;" src="9.png" />
<img class="hide3" class="show3" style="position:absolute; top:220px; left:380px;" src="9.png" />
<img class="hide4" class="show4" style="position:absolute; top:180px; left:420px;" src="9.png" />
<img class="hide5" class="show5" style="position:absolute; top:140px; left:460px;" src="9.png" />
<img class="hide6" class="show6" style="position:absolute; top:100px; left:500px;" src="9.png" />

</body>
</html>

編集

提案を受けた後、私は修正を加えました。非表示を使用しましたが、まだ非表示になりません。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hide1").delay(2050).hide(1);
    $('.show1').delay(2000).show(1);
    $(".hide2").delay(2550).hide(1);
    $('.show2').delay(2500).show(1);
    $(".hide3").delay(2550).hide(1);
    $('.show3').delay(3000).show(1);
    $(".hide4").delay(3550).hide(1);
    $('.show4').delay(3500).show(1);
    $(".hide5").delay(4050).hide(1);
    $('.show5').delay(4000).show(1);
    $('.noshow').hide(0);


});
</script>
</head>

<body>
<img class="noshow hide1 show1" style="position:absolute; top:300px; left:300px;" src="9.png" />
<img class="noshow hide2 show2 " style="position:absolute; top:260px; left:340px;" src="9.png" />
<img class="noshow hide3 show3 " style="position:absolute; top:220px; left:380px;" src="9.png" />
<img class="noshow hide4 show4 " style="position:absolute; top:180px; left:420px;" src="9.png" />
<img class="noshow hide5 show5 " style="position:absolute; top:140px; left:460px;" src="9.png" />
<img class="noshow hide6 show6 " style="position:absolute; top:100px; left:500px;" src="9.png" />

</body>
</html>
4

2 に答える 2

1

img画像のフリッカー効果を作成しようとしていると思われるすべてのタグに同じ画像を使用しています。そのためには、このチュートリアルに従うことができます。

コードを同期的に動作させたい場合は、show/hideこのようにそれぞれを別の完全なコールバックに挿入する必要があります

$(".hide1").delay(2050).hide(1,function(){
         $('.show1').delay(2000).show(1,function(){
              $(".hide2").delay(2550).hide(1);
        });
 });

これは非常に大きなチェーンを作成し、望ましくありません。上記のチュートリアルの出力をhttp://www.mattbudd.co.uk/で確認してください 。そのようなものが必要な場合は、チュートリアルに従うことができます。

私が間違っていなければ、ここにあなたの問題に対する可能な解決策があります

ワーキングデモ

于 2012-05-19T07:22:55.877 に答える
1

それらを隠すようなことは何も書かれていないため、最初は一緒に表示されます。Yuo は、「display:none」スタイルをそれらに追加できます。1 つずつ表示/非表示にしたい場合、またはスクリプトを変更してすべてを遅延なく hide() してから、ur を追加することができます。オリジナルコード。
とにかく画像に影響を与えないため、2つの異なるcssクラスも必要ありません

于 2012-05-19T07:19:21.177 に答える