0

Webページのスクロール画像を進める機能があります。ここで見ることができます：

http://leadgenixhosting.com/~intmed/

右矢印は、クリックして画像を進めるものです。.unbind() を使用して、画像が .animate() で終了するまで矢印をクリックできないようにして、同期が外れないようにしたこの問題があります。しかし、 .bind() を使用して矢印を再度クリック可能にする方法が正確にはわかりません。

現在の関数は次のようになります。

$('#in-right').click(
        function(){
            $('#in-right').unbind('click');
            imageSwitch();
            $('#in-right').bind('click');
        }
);

私は明らかに bind を間違って実装しています。どうすれば正しく実装できますか？

ここに私の imageSwitch() 関数があります:

function imageSwitch(){

        current++;
        current_image++;
        previous_image++;
        next++;
        two_prev++

        if(two_prev >= divs.length){
            two_prev = 0;   
        }

        if(current >= gallery_images.length){
            current = 0;    
        }

        if(previous_image >= divs.length){
            previous_image = 0; 
        }

        if(current_image >= divs.length){
            current_image = 0;
        }

        if(next >= divs.length){
            next = 0;
        }   

        $('#'+divs[current_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000})
        $('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');

        $('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});

        $('#'+divs[next]+'').animate({left: '+=1020px', top: '-=10000px'}, 1000);

        $('#'+divs[two_prev]+'').animate({left: '+=1020px', top: '+=10000px'}, 1000);
    }
4

1 に答える 1

5

.bind2 番目のパラメーターとして関数を渡す必要があります。

function clickFunc(){  // Give the event function a name
    $('#in-right').unbind('click');
    imageSwitch();
    $('#in-right').click(clickFunc);  // .click is shorthand for `.bind('click',`
}
$('#in-right').click(clickFunc);

編集:imageSwich関数がコールバックを受け取るようにする必要があります。これにより、アニメーション化が完了したら関数を再バインドできます。

function imageSwitch(callback){
    // code...
}

function clickFunc(){  // Give the event function a name
    $('#in-right').unbind('click');
    imageSwitch(function(){
        $('#in-right').click(clickFunc);
    });
}
$('#in-right').click(clickFunc);

すべてのアニメーションが完了したらコールバックが確実に実行されるようにするために、jQuery のdeferredsを使用できます。

基本的に、返されたオブジェクトを変数に保存します.animate。次に$.when、 とを使用.thenして、正しい時間にコールバックを実行します。

（これはテストされていません、ところで）

function imageSwitch(callback) {
    var animations = [];

    current++;
    current_image++;
    previous_image++;
    next++;
    two_prev++

    if (two_prev >= divs.length) {
        two_prev = 0;
    }

    if (current >= gallery_images.length) {
        current = 0;
    }

    if (previous_image >= divs.length) {
        previous_image = 0;
    }

    if (current_image >= divs.length) {
        current_image = 0;
    }

    if (next >= divs.length) {
        next = 0;
    }

    animations.push($('#' + divs[current_image] + '').animate({
        left: '-=1020px'
    }, {
        queue: false,
        duration: 1000
    }));

    $('#' + divs[current_image] + '').css('background-image', 'url(' + gallery_images[current] + ')');

    animations.push($('#' + divs[previous_image] + '').animate({
        left: '-=1020px'
    }, {
        queue: false,
        duration: 1000
    }));

    animations.push($('#' + divs[next] + '').animate({
        left: '+=1020px',
        top: '-=10000px'
    }, 1000));

    animations.push($('#' + divs[two_prev] + '').animate({
        left: '+=1020px',
        top: '+=10000px'
    }, 1000));

    if (typeof callback === 'function') {
        // Apply is used here because `$.when` expects to passed multiple parameters
        $.when.apply($,animations).then(callback);
    }
}

Deferred とアニメーションのデモ: http://jsfiddle.net/M58KK/

于 2012-08-10T16:09:48.590 に答える