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

Question

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

@MelanciaUK, my question is about how to achieve the effect of the code i gave above WITHOUT using jQuery UI. — mark yorky
– mark yorky, Commented Aug 22, 2013 at 15:25

Suresh Atta · Accepted Answer · 2013-08-22 14:31:52Z

3

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

Here's a great tutorial

edited Aug 22, 2013 at 14:31

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

answered Aug 22, 2013 at 14:29

Tomzan

2,81816 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gion_13 · Accepted Answer · 2013-08-22 14:57:55Z

0

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.

answered Aug 22, 2013 at 14:57

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

1 Comment

gion_13 Over a year ago

Yes, you should animate the margin-left property to something similar to '+=' + css.width

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related