Question

I have a function that is advancing scrolling images on a webpage. It can be seen here:

http://leadgenixhosting.com/~intmed/

The right arrow is what you click to advance the images. I have this problem where I have used .unbind() so that the arrow is unclickable until the images have finished with .animate() so that they don’t get out of sync. But I’m not exactly sure how to use .bind() to make the arrow clickable again.

This is what the function currently looks like:

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

I’m obviously implementing bind incorrectly. How can I implement it right?

Here is my imageSwitch() function:

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);
    }

Answer 1

.bind requires you pass it a function as the 2nd parameter.

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);

EDIT: You should make your imageSwich function take a callback, so it can re-bind the function once it’s done animating.

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);

As for making sure the callback runs once all the animations are done, we can use jQuery’s deferreds.

Basically, you want to save the objects returned from .animate into varibles. Then use $.when, and .then to run the callback at the correct time.

(This is untested, BTW)

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 and animations demo: http://jsfiddle.net/M58KK/