jquery - 如何使用带有工具提示的 JQuery 重现幻灯片动画？

Question

在 CarRentals.com 上，当您将鼠标悬停在“功能”按钮上时，会有一个很酷的动画：http: //www.carrentals.com/us/search/sfo/2013-02-08-10-00/61010/2013- 02-11-10-00。这是通过 JQuery 工具提示库完成的。

如何在单击时为隐藏的容器（不是工具提示）重现此动画？

Answer 1

我知道您不想要工具提示，但为什么不在标题或 rel 属性中填充隐藏信息并使用如下内容：

http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

我在任何地方都使用它，非常可定制、智能且流畅。

Answer 2

通过首先将我的弹出窗口隐藏起来，不透明度为 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'})
    });

Answer 3

它是slideUp和fadeIn的组合。您只需在定位的隐藏 div 上并行执行这两个动画。