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這裏來減少選擇的數量用過的。由於您選擇的是相同的對象，因此最好重新使用現有的對象。