jquery .animate不同的速度

Question

我在Jquery中使用.animate函数。我有一个使用marginLeft滑过的div，但我也需要它淡入，但我需要它比marginLeft效果慢。使用.animate，我似乎只能应用一个速度参数。

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".topFrameAnim").css("opacity", "0.0"); 
    $(".topFrameAnim").animate({ 
    marginLeft: "0", 
    }, 500); 

    $(".topFrameAnim").animate({ 
    opacity: "1", 
    }, 1000); // Need this effect to be applied at the same time, at a different speed. 




    }); 


</script> 

Answer 1

您需要的选项数组中使用动画的两个参数的形式，用queue:false（第一动画）：

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".topFrameAnim").css("opacity", "0.0") 

.animate({ 
    marginLeft: "0", 
    }, { queue: false, duration: 500) 
    .animate({ 
    opacity: "1", 
    }, 1000); // Need this effect to be applied at the same time, at a different speed. 

    }); 


</script> 

注：这是.animate这里来减少选择的数量用过的。由于您选择的是相同的对象，因此最好重新使用现有的对象。