没有使用jQuery UI的jQuery .show（'slide'）

Question

我想知道是否有一个jQuery函数在不使用jQuery UI的情况下执行与此代码相同的效果？

$(selector).show('slide', { direction: 'right' }, 300); 

Answer 1

没有，但你可以animate的element如你所愿。

Here's a great tutorial

Answer 2

下面是我想出了一个快速的插件。它基本上动画的width和opacity属性：

$.fn.slideRight = function(duration, callback) { 

    duration = duration || 300; 

    return this.each(function() { 
     var $this = $(this), 
      css = getInitialStyle($this); 

     $this 
      .css({width: 0, display: 'block'}) 
      .animate(css, duration, callback); 
    }); 

    function getInitialStyle($el){ 
     var css = $el.data('initialStyle'); 

     if(!css || !css.width || !css.opacity) { 
      var isHidden = $el.is(':hidden'); 
      if(isHidden) $el.show(); 
      css = { 
       width: $el.width(), 
       opacity: $el.css('opacity') 
      } 
      if(isHidden) $el.hide(); 

      $el.data('initialStyle', css); 
     } 

     return css;    
    } 
} 

而这里的live demo。