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

如何在点击时触发转换插件？

1 个答案: