使用jQuery,我创建了一个基本的“工具提示”动画,这样工具提示就会以一个小动画的形式出现,在这个动画中,工具提示可以淡入视图,也可以垂直移动。
到目前为止,我有这样的想法:
$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');
这样做或这样做:
$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');
动画将一次运行一个,首先是淡入,然后是垂直动画。有没有办法同时做这两件事?
发布于 2009-10-31 06:34:19
$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');
但是,这似乎不适用于display: none
元素(就像fadeIn
一样)。因此,您可能需要预先放置以下内容:
$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);
发布于 2014-01-07 20:15:23
对于几年后仍在寻找的人来说,情况发生了一些变化。您现在也可以使用.fadeIn()
的queue
,因此它的工作方式如下所示:
$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
这样做的好处是可以处理display: none
元素,因此不需要额外的两行代码。
发布于 2009-10-31 07:31:28
如果你想单独调用它们,另一种做同步动画的方法(例如,来自不同的代码)就是使用queue
。同样,与Tinister的答案一样,您必须为此使用animate,而不是fadeIn:
$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...
$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');
https://stackoverflow.com/questions/1652576
复制相似问题