同时动画和淡入 - jquery

Posted 2023-05-08

【中文标题】同时动画和淡入 - jquery

【英文标题】：animate and fade in at the same time - jquery

【发布时间】：2013-10-27 11:35:08

【问题描述】：

我对此感到困惑已久，但我似乎无法确定如何使 .animate 和 .fadeIn 同时发生，而不是连续发生。

所以当我尝试它时，对象会淡入，然后移动，但我很想实现这样的效果：

http://www.schoolwebsite.com/ - 例如，查看页面底部悬停的社交媒体图标上显示的工具提示

在下面查看我的尝试

$(".content_slider li a").hover(function () 
    $(this).find('.hover_arrow').animate(
        "bottom": "+=100px"
    , "fast").fadeIn('fast');
,function () 
    $(this).find('div.hover_arrow').animate(
        "bottom": "+=100px"
    , "fast").fadeOut('fast');
)

非常感谢任何帮助:)

【问题讨论】：

查看这篇文章...***.com/questions/1652576/…

【参考方案1】：

与其将fadein 用作单独的方法，不如在 animate 方法中使用 opacity？

$(this).find('.hover_arrow').animate("bottom": "+=100px", "opacity": "1", "fast")

您必须将 CSS 更改为“opacity: 0”而不是 display: none;，但您可以将效果包含在单个函数中

如果你想保留 display: none（为了一个干净的界面），你可能还想包含这个调用：

$(this).find('.hover_arrow').show() //display: block
$(this).find('.hover_arrow').animate("bottom": "+=100px", "opacity": "1", "fast") //opacity: 1

【参考方案2】：

animate 和 fadeIn 都有 queue 选项。

默认情况下，它们会在同一个队列中结束，因此会依次执行。

要么将它们放在单独的队列中，要么根本不将它们排队。

另请参阅： What are queues in jQuery?