How to trigger transition plugin on click?

Question

I found this plugin http://jsfiddle.net/addyosmani/A89Sq/show/ that animates bars when the page loads. I want the animations to start individually when each bar is clicked on. Any idea how to do this?

Thanks

Here the code

$(window).load(function () {
    $(function () {
        function updateStatus(msg) {
            $('.status').html(msg);
        }

        function compatTest() {
            if (Modernizr.csstransitions) {
                $('.compat span').html('yes');
            }
        }
        compatTest();
        $('.alt0').animate({
            width: '480px'
        }, 4000, function () {
            updateStatus('Animation 1 Complete');
        });
        $('.alt1').animate({
            width: '480px'
        }, 5000, function () {
            updateStatus('Animation 2 Complete');
        });
        $('.alt2').animate({
            width: '480px'
        }, 20000, function () {
            updateStatus('Animation 3 Complete');
        });
    });
});

html

    <div class="container">
    <div id="one" class="bar">
        <div class="box alt0"></div>
    </div>
    <div class="bar">
        <div class="box alt1"></div>
    </div>
    <div class="bar">
        <div class="box alt2"></div>
    </div>
</div>

Answer 1

I can't see the animation in my browser (Firefox), but the code to set up the animation on a click would be the following.

$('.alt0').click(function(){
    $(this).animate({width: '480px'}, 4000, function(){
        updateStatus('Animation 1 Complete');
    });
});

$('.alt1').click(function(){
    $(this).animate({width: '480px'}, 5000, function () {
        updateStatus('Animation 2 Complete');
    });
});

$('.alt2').click(function(){
    $(this).animate({width: '480px'}, 20000, function () {
        updateStatus('Animation 3 Complete');
    });
});