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

Posted 2023-05-08

【中文标题】同时运行两个动作，fadein() & animate() [重复]

【英文标题】：Run two actions at the same time, fadein() & animate() [duplicate]

【发布时间】：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);

谢谢

【问题讨论】：

你可以试试小提琴。

【参考方案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);