articles

2010 年 3 月 9 日

jQuery スライドショーでフェードイン、フェードアウト2010

CATEGORYjQuery   TAG 10:16 PM

前々からやってはいましたが、データの形式(配列からJSONに)とコールバックの仕方を変えてシンプルにしたので一応メモっておきます。
もちろんこれだけでは動かず一定間隔ごとにchange()関数を実行する必要があります。

ちなみにJSONは(JavaScript Object Notation)だそうです。


//初期フェーズ
slide_phase=-1;

//データ
pickup_data=new Array();
slide_data[0]={"href":"test_url1.html","comment":"テスト1","img_path":"1.jpg"};
slide_data[1]={"href":"test_url2.html","comment":"テスト2","img_path":"2.jpg"};
slide_data[2]={"href":"test_url3.html","comment":"テスト3","img_path":"3.jpg"};

slide_num=slide_data.length;

function change(){
	if(slide_phase < slide_num-1){
		slide_phase ++;
	}else{
		slide_phase =0;
	}
	$("#slide img").fadeOut(500,changeSrc);
	$("#slide a").attr("href",slide_data[slide_phase].href);
	$("#slide .comment").text(slide_data[slide_phase].comment);
}
//コールバック
// $(this)でイベントが発生したオブジェクトを受け取れる。
function changeSrc(){
	$(this).attr("src", slide_data[slide_phase].img_path).fadeIn(2500);
}

2009 年 10 月 6 日

jQuery フェードイン完了を待つ

CATEGORYEffectjQuery   TAG 8:14 PM

基本的なところかもしれませんが。
画像をクリックするとsrcが変わるスクリプトで

$("#element").click(function(){
	$(this).hide().attr("test.jpg").fadeIn();							
});

とした場合の話ですが、
フェードイン完了前にクリックするとなにやらおかしなことになります。

loading=false;
$("#element").click(function(){

if(loading==false){
 loading=true;
 $(this).hide().attr("test.jpg").fadeIn("2000",complete);
}						
});

function complete(){
 loading=false;
}

以上のようにして、fadeInのコールバックをつかってフェードインが終わるのを待つ事にすればいいと
気付きましたのでメモします。