0

jQuery を学習しようとしています。基本的な表示と非表示を使用して、次と前のボタンを備えた単純な画像ビューアを作成しようとしました。したがって、スクリプトの明らかな流れは、最初に前の画像を非表示にしてから次の画像を表示することです。しかし、次のボタンをすばやくクリックすると、前の .hide() を完了せずに次の画像が表示されることがあります。.hide() の実行が完了したかどうかを確認し、完了するまで待機するエレガントな方法が必要です。これがコードスニペットです

var picArray = new Array('#test1','#test2','#test3','#test4');
var picArrayIndex = 0;
$(document).ready(function()
{

$(picArray[picArrayIndex]).show();
$(".next-btn").click(function(){

    picArrayIndex++;
    if(picArrayIndex > picArray.length - 1)
        {picArrayIndex = 0;
            $(picArray[picArray.length - 1]).hide();
        }

    $(picArray[picArrayIndex - 1]).hide();
      $(picArray[picArrayIndex]).animate({
opacity: 1,
hspace:80    

 }, 1000, function() {
   // Animation complete.
 });
        $(picArray[picArrayIndex]).effect("bounce", { direction:'left', times:1 },   500);

    $(picArray[picArrayIndex]).show();
});
    $(".prev-btn").click(function(){

    picArrayIndex--;
    if(picArrayIndex < 0)
        {picArrayIndex = picArray.length - 1;
            $(picArray[0]).hide();}
    $(picArray[picArrayIndex + 1]).hide();
    $(picArray[picArrayIndex]).show();
});
});
4

2 に答える 2

2

hide コールバックをチェックインできます:-

$(ele).hide("duration in milliseconds",function(){
   //your code after hiding is done.
});
于 2013-06-06T17:59:01.217 に答える