CODEWITHSUNDEEP
jqueryhtmlcss
mmaceachran
mmaceachran

Reputation: 3358

jQuery animate horizontally not vertically

I have 2 tags with content, a left and right pane. When you click a button I need the left pane to disappear. this is simple and I do this:

$("#leftPanel").hide(800);

Works fine, however, the content in the left pane hides vertically, THEN the right pane slides over horizontally.

How do I get it to just hide itself horizontally?

Upvotes: 3

Views: 6176

Answers (4)

Lukan Dos Santos Pinto
Lukan Dos Santos Pinto

Reputation: 1

Make the translation with css using transform: translateX()

example:

element{
/* Start hidden */
transition: 0.5s;
transform: translateX(110%);}

element.active{
/* Showing the element */
transition: 0.5s;
transform: translateX(0%);}

and on the click event in javascript you toggle the active class

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

The hide method can accept an easing effect, its customization and a duration.

You can mix them to have a similar graphical behavior by sliding in left direction

Docs: http://api.jquery.com/hide/

Code:

$("#hideme").click(function () {
    $(".obj2").hide('slide', { direction: 'left' }, 800);
});

$("#showme").click(function () {
    $(".obj2").show('slide', '', 800);
});

Demo: http://jsfiddle.net/IrvinDominin/veER4/

Upvotes: 3

Matthew R.
Matthew R.

Reputation: 4350

You should look at jQuery's native animate function:

// Slide closed and hide
$('#element').animate({
    width: '0px' // no width
}, 1000, function() {
    $(this).hide();
});

// Show and slide back open
$('#element').show().animate({
    width: '100px' // full width in pixels
}, 1000);

Upvotes: 3

SoWhat
SoWhat

Reputation: 5622

You need jquery UI effects for that

http://jqueryui.com/hide/

Try the hide slide effect.

$("#leftPanel").hide("slide");

Upvotes: 0

Related Questions