Question

如何在点击按钮后让这个动画永远运行？

$("button").click(function(){
    var a=$("#an");
    a.animate({width:200,opacity:0.5},"slow");
    a.animate({height:200,opacity:0.5},"slow");
    a.animate({width:100,opacity:0.8},"slow");
    a.animate({height:100,opacity:0.8},"slow");
})

Answer 1

试试这个：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<input type="button" id="button" value="start" />

<div id="an" style="width:100px; height:100px;background-color:red">

<script>
$("#button").click(function(){

    var a = $("#an");
    if ($(this).val() == 'start') {
        $(this).val("stop");
        var v = setInterval(function(){animate(a)},1000);
    }

})

function animate(a) {
    a.animate({width:200,opacity:0.5},"slow");
    a.animate({height:200,opacity:0.5},"slow");
    a.animate({width:100,opacity:0.8},"slow");
    a.animate({height:100,opacity:0.8},"slow");
}

</script>

Answer 2

我认为最好使用CSS的动画来实现这一点。我在这里使用-webkit前缀 -

对其进行了编码

http://jsfiddle.net/6GX2E/

刚刚用这个jQuery触发：

$("button").click(function(){
     $("#an").removeClass('noAnimate').addClass('animate');
});

单击“按钮”时如何动画无限这个框？

2 个答案: