JavaScript + Ajax 実践サンプル集 - イメージをフェイドアウト/フェイドインさせて切り替える

イメージをフェイドアウト/フェイドインさせて切り替える　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのfadeIn/fadeOutメソッドを利用してイメージをフェイドアウト/フェイドインさせながら切り替えます。サンプルが表示されたら[FadeOut/FadeIn Image !]ボタンをクリックしてください。イメージがフェイドしながら切り替わります。

このサンプルを編集して試してみる

fadeIn()をイメージのloadイベントで行うのがポイントです。

$('#btnSwitch').click(function () {       
  $('#bug').fadeOut(2000, function () {
    $(this).load(function () {
      $(this).fadeIn(2000);
    });
    var src = $(this).attr('src');
    if (src.lastIndexOf('bug1.jpg') != -1) {
      $(this).attr('src', 'jQuery/fadeoutFadeinImage/bug2.jpg');
    } else {
      $(this).attr('src', 'jQuery/fadeoutFadeinImage/bug1.jpg');
    }        
  });
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Fadeout and Fadein image</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">

$(function () {
      $('#btnSwitch').click(function () {       
        $('#bug').fadeOut(2000, function () {
          $(this).load(function () {
            $(this).fadeIn(2000);
          });
          var src = $(this).attr('src');
          if (src.lastIndexOf('bug1.jpg') != -1) {
            $(this).attr('src', 'jQuery/fadeoutFadeinImage/bug2.jpg');
          } else {
            $(this).attr('src', 'jQuery/fadeoutFadeinImage/bug1.jpg');
          }        
        });
      });
    });
  
  </script>
</head>
<body>

<button id="btnSwitch">FadeOut/FadeIn Image !</button>
  <img id="bug" src="jQuery/fadeoutFadeinImage/bug1.jpg" />

</body>
</html>