jQuery .animate不同的速度 [英] jquery .animate different speeds
问题描述
我在Jquery中使用.animate函数.我有一个使用marginLeft滑动的div,但是我也需要它淡入,但我需要它比marginLeft效果要慢.使用.animate,我似乎只能应用一个速度参数.
I am using the .animate function in Jquery. I have a div that slides over using marginLeft, but I also need it to fade in, but I need it to be slower than the marginLeft effect. With .animate, I can only seem to apply one speed parameter.
<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>
推荐答案
您需要使用动画的两个参数形式,在选项数组中为queue:false
(在第一个动画上):
You need to use the two argument form of animate, with queue:false
in the options array (on the first animation):
<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,以减少使用的选择器的数量.由于选择的对象相同,因此最好重用现有对象.
Note: It's .animate here to reduce the number of selectors used. Since you're selecting the same objects, it's better to reuse the existing object.
这篇关于jQuery .animate不同的速度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!