CODEWITHSUNDEEP
javascriptjqueryhtmlcss
zburns12
zburns12

Reputation: 1803

jQuery sliding function

I have a working jQuery sliding function that I have posted here below. I got it from another question on this site. It's great. Except I now want it to go the opposite direction.

I used this to slide from left to right. I tried adding a minus sign (-) in the animate function to make it {'-width': 'toggle'} but that just made it toggle on and off instead of sliding. I'm sure it's something simple, I'm just frustrated with it.

JS
$(document).ready(function(){
    $('.pull-me').click(function(){
    $('.panel p').css({
        'width': $('.panel p').width(),
        'height': $('.panel p').height()
    });
    $('.panel').animate({'width': 'toggle'});
    });
});

And the html

html
<div class="panel">
        <p id="novelDescrip">A website for a local musician to market, stream, and distribute music and merchandise. Content design and development</p>
    </div>
</div>
<p class="slide"><div class="pull-me">Slide Out!</div></p>

When I click the More info tab, I want that panel to slide out to the left. Then if they click the More info tab again, it should close back up to the right into the more info tab.

Is there not a way to just reverse the direction of the function i'm already using?

enter image description here

Upvotes: 1

Views: 199

Answers (2)

thenewseattle
thenewseattle

Reputation: 1451

Try this:

http://jsfiddle.net/FL87t/3/

$(document).ready(function(){
    $('.pull-me').click(function(){
        if ($('.panel').is(":hidden")) 
        {
            $('.panel').show('slide', { direction : 'left'}, 500);
        }
        else
        {
            $('.panel').hide('slide', { direction : 'right'}, 500);
        }
    });
});

Upvotes: 2

tinthetub
tinthetub

Reputation: 2196

This should help you: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

Read through it and you should find what your looking for. Bare in mind that JQuery also has: .slideDown() & .slideUp() But for changing the animation itself you're probably going to need CSS.

This goes in the opposite direction and sort of matches what you want to do in the image you just posted, try building off of it: JSFiddle

Upvotes: 0

Related Questions