jquery动画效果(一)

同心圆动画

<script>
    $(document).ready(function(){
        setInterval(function(){
            $("#div1").animate({
                opacity:'0.5',
                width: "+=100px",
                height: "+=100px",
                lineHeight: "+=100px",
                top: "-=50px",
                left: "-=50px"
            },2000).delay(800).animate({
                opacity:'0.5',
                width: "-=100px",
                height: "-=100px",
                lineHeight: "-=100px",
                top: "+=50px",
                left: "+=50px"
            },2000);
            $("#div2").animate({
                opacity:'0.5',
                width: "+=100px",
                height: "+=100px",
                lineHeight: "+=100px",
                top: "-=50px",
                left: "-=50px"
            },2000).delay(800).animate({
                opacity:'0.5',
                width: "-=100px",
                height: "-=100px",
                lineHeight: "-=100px",
                top: "+=50px",
                left: "+=50px"
            },2000);
        })

    });
</script>
<div id="div1" style="margin-top:50px;margin-left:50px;border-radius:50%;background:#3490dc;height:100px;width:100px;position:absolute;">

</div>
<div id="div3" style="margin-top:50px;margin-left:50px;border-radius:50%;background:#3490dc;height:100px;width:100px;position:absolute;">

</div>
<div id="div2" style="margin-top:75px;margin-left:75px; border-radius:50%;background:#3490dc;height:50px;width:50px;position:absolute;">
</div>