jQuery .animate不同的速度

本文介绍了jQuery .animate不同的速度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在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.