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

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。