同时运行两个动作，fadein() & animate() [重复]答案

【问题标题】：Run two actions at the same time, fadein() & animate() [duplicate]同时运行两个动作，fadein() & animate() [重复]
【发布时间】：2012-12-17 18:54:42
【问题描述】：

可能重复：
How do you fadeIn and animate at the same time?

我想使用 jquery 同时淡入和动画一个 div。这是我的代码：

$('#div').fadeIn('slow').animate({'left' : '5%'}, duration);

问题是，我先褪色，然后 div 开始自己制作动画；

我也试过了，但没有结果：

$('#div').fadeIn('slow');
$('#div').animate({'left' : '5%'}, duration);

谢谢

【问题讨论】：

你可以试试小提琴。

标签： jquery jquery-animate fadein

【解决方案1】：

你可以试试这个：http://jsfiddle.net/dXCPF/1/

$('#div').css({'display':'block', 'opacity':'0'})
         .animate({'opacity':'1','left':'5%'}, 1500);

首先我做了display:none; 然后用jQuery 应用css 并对其进行动画处理。似乎同时具有两种效果。

【讨论】：

【解决方案2】：

为什么不同时使用animate()：

$('#div').animate({
    'left' : '5%',
    'opacity' : 1
}, 600);

【讨论】：

IMO 最佳解决方案

【解决方案3】：

animate 似乎不适用于display: none 元素（就像fadeIn 一样）。因此，您可能需要在使用 animate 之前输入：

$('#div').css('display', 'block');
//then use animate
$('#div').animate({'left' : '5%'}, duration);

【讨论】：

【解决方案4】：

试试这个：

$('#div').animate({ 
    opacity: 1
}, { duration: slow, queue: false });
$('#div').animate({
   left: '5%'
}, { duration: duration, queue: false });

【讨论】：

【解决方案5】：

你可以简单地使用

$('#div').fadeIn(fast).animate({'left' : '5%'}, fast);

【讨论】：