Question

我已经困惑了很多年，但我似乎无法确定如何使.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');
})

非常感谢任何帮助：）

Answer 1

不是将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

Answer 2

animate和fadeIn都有queue选项。

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

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

另见： What are queues in jQuery?

同时动画和淡入 - jquery

2 个答案: