twitter-bootstrap - 如何在显示时为引导弹出窗口设置动画？

Question

我已经创建了我的自定义 bs 弹出窗口并且工作正常。我想在显示时对其进行动画处理。我怎样才能给我的自定义动画？代码非常简单，如下所示。

$("#userPopover").popover({
    trigger: "hover focus",
    delay: {show: 1000, hide: 400},
    placement: 'bottom',
    html: true,
    content: $(".tt-container").html(),
});

Answer 1

从关于hide（如何自定义 Twitter Bootstrap 弹出框隐藏动画）的类似问题开始，您可以扩展 Bootstrap 以处理show函数，并在其中触发自定义动画。

代码：

(function () {

    var orig = $.fn.popover,
        proto = $.extend({}, $.fn.popover.Constructor.prototype);

    $.fn.popover = function (options) {
        return this.each(function () {
            orig.call($(this), options);
            if (typeof options.show == 'function') {
                $(this).data('bs.popover').show = function () {
                    options.show.call(this.$tip, this);
                    proto.show.call(this);
                };
            }
        });
    }

})();

用法：

$("#userPopover").popover({
    trigger: "hover focus",
    delay: {
        show: 1000,
        hide: 400
    },
    placement: 'bottom',
    html: true,
    content: $(".tt-container").html(),
    show: function () {
        $(this).fadeIn('slow');
    }
});

演示：http: //jsfiddle.net/IrvinDominin/8uKA5/