0

初めてjQueryを試しています。私の最初の目標は、ページ上の1つの画像を別の画像にフェードインさせることです。私は、background-imageが異なる画像ファイルに設定されているいくつかのdivでこれを行う方法を理解しました（以下のコードを参照）。ただし、いくつかのdivを使用する代わりに、既存のimgタグに対して何らかの方法でこれを実行している場合、これは私の状況ではより適切に機能します。このコードが行うことを行う方法はありますが、imgタグを使用しますか？

<html>
  <head>
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">
      $(function() {
          $("#imgblock2").delay(3000).fadeIn(3000);
      });

    </script>
    <style type="text/css">
      #imgblock {
        background-image:url("frame.jpg");
        width:240;
        height:320;
        position:absolute;
        top:0;
        left:0;
      }
      #imgblock2 {
        background-image:url("average.jpg");
        width:240;
        height:320;
        position:absolute;
        top:0;
        left:0;
        display:none;
      }
    </style>

  </head>
  <body>
    <div id="imgblock"></div>
    <div id="imgblock2"></div>
  </body>
</html>
4

3 に答える 3

0

はい、divの代わりに実際の画像を使用してください。画像IDも指定します。

于 2011-09-24T08:07:08.577 に答える
0

両方の画像を含むコンテナdivを用意し、それpositionを相対に設定します。その後、両方の画像をそのdiv内に配置し、それらにIDを与えることができます。必ず、positionそれらが互いに重なるように、絶対に設定してください。

于 2011-09-24T08:15:30.583 に答える
0

これはそれほど難しいことではありません;）

$(document).ready(function() {
   var relatedImg =  $("#imgblock");

   relatedImg.css("display", "none");
   relatedImg.fadeIn("slow", function(){
       relatedImg.fadeOut("slow", function(){
           relatedImg.attr("src", "http://farm6.static.flickr.com/5221/5592275221_8190eb9b9c.jpg");
           relatedImg.fadeIn("slow");
       }); 

    });
});

説明

最初に、javascriptを介してdisplayプロパティを「none」に設定します（したがって、画像がない場合は画像が表示されます）。その後、関数fadeInをfadeOut使用して画像srcを変更しattrます。

于 2011-09-24T08:16:15.323 に答える