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>

完整的动画功能

1 个答案: