jquery - 如何在点击时触发过渡插件？

Question

我发现这个插件http://jsfiddle.net/addyosmani/A89Sq/show/在页面加载时动画条。我希望动画在单击每个栏时单独启动。知道怎么做吗？

谢谢

这里的代码

$(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

我在浏览器 (Firefox) 中看不到动画，但单击时设置动画的代码如下。

$('.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');
    });
});