在 CarRentals.com 上,当您将鼠标悬停在“功能”按钮上时,会有一个很酷的动画:http: //www.carrentals.com/us/search/sfo/2013-02-08-10-00/61010/2013- 02-11-10-00。这是通过 JQuery 工具提示库完成的。
如何在单击时为隐藏的容器(不是工具提示)重现此动画?
在 CarRentals.com 上,当您将鼠标悬停在“功能”按钮上时,会有一个很酷的动画:http: //www.carrentals.com/us/search/sfo/2013-02-08-10-00/61010/2013- 02-11-10-00。这是通过 JQuery 工具提示库完成的。
如何在单击时为隐藏的容器(不是工具提示)重现此动画?
我知道您不想要工具提示,但为什么不在标题或 rel 属性中填充隐藏信息并使用如下内容:
http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
我在任何地方都使用它,非常可定制、智能且流畅。
通过首先将我的弹出窗口隐藏起来,不透明度为 0,margin-top 作为我希望动画开始的位置,然后在单击时执行以下操作,我能够非常接近:
$popup.show(1).animate({opacity: 1,
top: ($popup.position().top - 30)
}, 'fast')
要隐藏弹出窗口,我必须正确重置 CSS:
$popup.animate({ opacity: 0.5,
top: ($popup.position().top - 10)
}, 'fast', function() {
$popup.fadeOut('slow');
$popup.css({'display': 'none', 'opacity': 0, 'top': '12px'})
});