同时动画和淡入 - jquery答案

【问题标题】：animate and fade in at the same time - jquery同时动画和淡入 - 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');
})

非常感谢任何帮助:)

【问题讨论】：

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

标签： javascript jquery

【解决方案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?

【讨论】：