你如何淡入,并在同一时间动画?
-
22-07-2019 - |
题
使用jQuery我创建一个基本“工具提示”动画,以使工具提示将显示在一个小动画在其淡入视图以及垂直移动。
到目前为止,我有这样的:
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
否则这种方式或这样:
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
在动画将运行一次一个,在第一褪色,然后垂直动画。有没有办法把它在同一时间做两?
解决方案
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');
然而,这不会出现上display: none
元件工作(如fadeIn
一样)。所以,你可能需要把这个事先:
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
其他提示
有关人员还在寻找一个几年后,事情已经改变了一点。现在,您可以使用queue
的.fadeIn()
以及使之工作是这样的:
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
这对display: none
要素工作,所以你不需要额外的代码两行的利益。
另一种方式来做到同步的动画,如果你想单独打电话给他们(例如,从不同的代码)是使用queue
。同样,与Tinister的答案,你将不得不使用动画,这和不淡入:
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
不隶属于 StackOverflow