Question

我已经创建了自定义bs popover并且正常运行。我希望在展示时为其制作动画。如何提供自定义动画？代码非常简单，如下所示。

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

Answer 1

从hide（How to customize Twitter Bootstrap popover hide animation）上的类似问题开始，您可以扩展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/

如何显示动画引导区弹出窗口？

1 个答案: