【jquery】jqueryを使って画像クリックでフェード切り替え（fadeOut,fadeIn）

前回の記事で、ただ単に画像を切り替えるサンプルを作りましたが、あまりに味気なかったので、フェードで切り替えるサンプルを作ってみます。
ほとんど前回の記事と一緒で、画像を切り替える部分だけが違うだけです。

htmlのサンプル

画像を表示したい場所に、imgタグを置いているだけです。。

jqueryのサンプル

//切り替える画像のファイルを配列で指定
var imageArr = 
 [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
 ];

//表示する画像の配列の添え字
var now_image_count = 0;

$(document).ready(function(){
 //画像配列の1番目をセットする。
 $('#imageerea').attr('src', imageArr[now_image_count]);
 
 $('#imageerea').click(function(){
  
  if (now_image_count == imageArr.length - 1) {
   now_image_count = 0;
  } else {
   now_image_count++;
  }
  
  $('#imageerea').fadeOut(1000, function(){
         ($('#imageerea').attr('src', imageArr[now_image_count])).fadeIn(1000);
     });
  
 });
 
});

//切り替える画像のファイルを配列で指定
var imageArr = 
 [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
 ];

imageArrに切り替えさせたい画像のファイルパスとファイル名を記載しています。

//表示する画像の配列の添え字
var now_image_count = 0;

now_image_countは、表示する画像の添え字で、初期値は0で、画像が切り替わる毎に値が変わります。

$(document).ready(function(){
 //画像配列の1番目をセットする。
 $('#imageerea').attr('src', imageArr[now_image_count]);
 
 $('#imageerea').click(function(){
  
  if (now_image_count == imageArr.length - 1) {
   now_image_count = 0;
  } else {
   now_image_count++;
  }
  
  $('#imageerea').fadeOut(1500, function(){
         ($('#imageerea').attr('src', imageArr[now_image_count])).fadeIn(1500);
     });
  
 });
 
});

readyイベントで、now_image_countの添え字にある画像を表示。
clickイベントで、now_image_countがimageArrのサイズと同じであれば最初に戻し、小さければ添え字を１プラスしています。

$('#imageerea').fadeOut(1000, function(){
 ($('#imageerea').attr('src', imageArr[now_image_count])).fadeIn(1000);
});

この部分だけ前回と違う記述になっています。
fadeOutもfadeInも、第１引数にフェードするアニメーション時間を指定します。（ミリ秒）
第２引数にアニメーション終了後に実行する関数を記載します。

この例では、１秒かけてfadeOutして、終わったタイミングで次の画像を１秒かけてfadeInさせてます。 http://api.jquery.com/fadeout/
http://api.jquery.com/fadein/