jquery-animate - 动画中的完整功能

Question

据我所知，完成功能正在使用下一种方式（有一个例子）：

$('#element_id').animate({
    cssProperty1: 'value1',
    cssProperty2: 'value2', 
}, duration, function complete1() {
        $('#element_id').animate({
            cssProperty1: 'value1',
            cssProperty3: 'value3', 
        }, duration, function complete2() {
            $('#element_id').animate({
                cssProperty1: 'value1',
                cssProperty4: 'value4', 
            }, duration)
        })
})

如果我需要为新的 CSS 属性设置动画，在上一个结束后，多次？这将是代码的很大一部分。是否存在更简单的方法来介绍此代码？更优化？

Answer 1

我使用了五种风格，它称之为特定的间隔

<script>
$(document).ready(function(){
var s1=0;
var s2=3000;
var s3=6000;
var s4=9000;
var s5=12000;
function function1(){
s1=s1+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2', 
 },3000);
function function2(){
s2=s2+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2', 
 },3000);
function function3(){
s3=s3+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2', 
 },3000);
function function4(){
s4=s4+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2', 
 },3000);
function function5(){
s5=s5+12000;
$('#element_id').animate({
cssProperty1: 'value1',
cssProperty2: 'value2', 
 },3000);
setTimeout(function1,s1);
setTimeout(function2,s2);
setTimeout(function3,s3);
setTimeout(function4,s4);
setTimeout(function5,s5);
    });
</script>