javascript - jQuery .show('slide') 不使用 jQuery UI

Question

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

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

Answer 1

animate不，但你可以element随心所欲。

这是一个很棒的教程

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;            
    }
}

这是现场演示。