jQuery rebind function
<p>I want to have a div that animates the currently active image out of the view and instead animates in another image. There are several of these divs, and each one should have the same basic functionality but linked to different images. The problem I'm having is that you can click many of the divs before the animation is complete, which fires the other animations at the same time. My goal is to only be able to fire one animation at a time, and when the animation finishes you're able to fire the next animation. I've tried using unbind which works OK but then I'd have to rebind it later and I don't know how to do this. I'm really a jQuery noob so I would greatly apreciate an answer. Thanks!</p>

<p>My code:</p>

<pre><code>$('.div1').click(function clickevent() {
    $('.img2, .img3').animate({
        opacity: 0.1,
        left: 600
    }, 1000, function() {
        $('.img1').animate({
            opacity: 1,
            left: 0
        }, 500, function() {
            $('.div2, .div3').bind('click', clickevent); /* Here I want to rebind the function */
        });
    });
    $(this).addClass("active");
    $('.div2, div3').removeClass("active");
    $('div2, .div3').unbind('click', clickevent);
});
</code></pre>

<p>I have two other codeblocks for .div2 and .div3 which look the same but with different classes in different places. Is there any way to make the images finish their animation before being able to animate again? Thanks.</p>
