3

カスタム bs ポップオーバーを作成しましたが、正常に動作しています。見せながらアニメ化したい。カスタム アニメーションを指定するにはどうすればよいですか? 以下に示すように、コードは非常に単純です。

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

1 に答える 1

3

同様の質問hide( 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/

于 2014-07-29T10:00:26.173 に答える