CODEWITHSUNDEEP
javascriptjquery
mark yorky
mark yorky

Reputation: 193

jQuery .show('slide') without using jQuery UI

I was wondering if there's a jQuery function that do the same effect as this code without using jQuery UI?

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

Upvotes: 2

Views: 2240

Answers (2)

gion_13
gion_13

Reputation: 41533

Here's a quick plugin that I came up with. It basically animates the width and opacity properties: 

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

And here's the live demo.

Upvotes: 0

Tomzan
Tomzan

Reputation: 2818

No, but you can animate the element as you wish.

Here's a great tutorial

Upvotes: 3

Related Questions