同时进行动画处理和淡入 - jquery

animate and fade in at the same time - jquery

本文关键字：淡入 jquery 处理 动画      更新时间：2023-09-26

我一直对此感到困惑，但我似乎无法确定如何使.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');
})

非常感谢任何帮助:)

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

$(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

animate和fadeIn都有queue选项。

默认情况下，它们最终位于同一队列中，因此会一个接一个地执行。

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

另请参阅：jQuery中的队列是什么？

相关文章：