我一直对此感到困惑,但我似乎无法确定如何使.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中的队列是什么?