2013-04-09 47 views
0

据我所知,完成功能与未来路(有一个例子)使用:功能齐全

$('#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属性,以前被终结后,多次?这将是代码的一大部分。 是否存在任何更简单的方法来介绍此代码?更优化?

回答

0

我用五种风格它调用特定的时间间隔

<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>