0

画面の中央に div があり、その下にいくつかのリンクがあるページがあります。各リンクをクリックすると、div に異なる画像が表示される必要があります。リンクをクリックすると、現在の画像が画面の左側に移動してフェードアウトすると同時に、新しい画像が右側からフェードして表示され、div に配置される必要があります。私が今まで行ったことは、次のスクリプトで、各リンクで呼び出されます

OnClick=("changeImage('name')")



function changeImage(param){
var image = $("#div");
image.animate({"queue": true, opacity: 0.0, right: '650px'}, 1200);
image.attr('src', 'img/'+param+'.png');
}

左に移動する前に画像が変化する瞬間。その後、消えます。最初の画像が移動し、フェードアウトしてから、2 番目の画像が右から表示されるようにします。手伝って頂けますか？ありがとうございました

4

1 に答える 1

0 
$("#div").click(function(){
    var image = $(this);
    var param = 'example';
    image.animate({opacity: 0.0, right: '1000px'}, 1200).delay(100).animate({opacity: 1, right: '200px'}, 1200);
    setTimeout(function(){ image.attr('src', 'img/'+param+'.png').css('right','-1000px'); },1200);
});

フィドル: http://jsfiddle.net/nKpqU/

jQuery のエフェクトqueueは、エフェクトとアニメーションにのみ適用されます。イベントを jQuery の .xml ファイルonclickにバインドするようにセットアップも変更しました。click.click

于 2013-09-23T12:41:40.333 に答える