如何使用带有工具提示的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

我知道您不想要工具提示，但为什么不填写title或rel属性中的隐藏信息并使用以下内容：

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

我到处使用它，非常可定制，智能和光滑。

Answer 2

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

Answer 3

我能够真正接近，首先让我的弹出窗口隐藏，不透明度为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'})
    });