Как настроить Twitter Bootstrap popover hide animation

Question

Я хотел бы реализовать свою собственную анимацию скрыть popover. В настоящее время я непосредственно модифицирую bootstrap.js.

$.fn.popover = function (option) { 
      return this.each(function() { 
       var $this = $(this) 
        , data = $this.data('popover') 
        , options = typeof option == 'object' && option 
       if (!data) $this.data('popover', (data = new Popover(this, options))) 

       //original code 
       // if (typeof option == 'string') data[option]() 
       //custom code 
       if (typeof option == 'string') { 
        if (option === 'hide') { 
         //my customize animation here 
        } 
        else { 
         data[option](); 
        } 

       } 

      }) 
     } 

Я хотел бы знать, если есть в любом случае, так что я могу достичь динамической анимации, когда я инициализировать поповер

$('#target').popover({ 
    hide: function() { 
     //my own animation 
    } 
}); 

Answer 1

Хороший вопрос-мозг-тизер! Вы определенно можете это сделать. Посмотрите, как вы можете расширять плагин, не вмешиваясь в исходный код:

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

Здесь мы идем! Мы расширили функциональность popover по умолчанию с нашей собственной. Теперь можно использовать его:

$('.three').popover({ 
    placement: 'bottom', 
    hide: function() { 
    $(this).animate({marginTop: -100}, function() { 
     $(this).css({marginTop: ''}); 
    }); 
    } 
}); 

Над popover будет иметь пользовательский эффект анимации, скрываясь.

Конечно, если вы не предоставите опцию hide, у вас будет поведение по умолчанию.

Демо:http://jsfiddle.net/VHDwa/71/