jQuery animer horizontalement pas verticalement

Question

J'ai 2 balises avec contenu, un volet gauche et droit. Lorsque vous cliquez sur un bouton, le panneau de gauche doit disparaître. est simple et je fais ceci:

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

fonctionne très bien, cependant, le contenu dans le volet gauche se cache verticalement, puis les diapositives de volet de droite sur l'horizontale.

Comment l'obtenir pour se cacher horizontalement?

Answer 1

Vous avez besoin d'effets JQuery UI pour que

http://jqueryui.com/hide/

Essayez l'effet de glisser cacher.

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

Answer 2

Vous devriez regarder la fonction native Animer jQuery:

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

Answer 3

La méthode hide peut accepter un effet d'accélération, sa personnalisation et une durée.

Vous pouvez les mélanger pour avoir un comportement graphique similaire en faisant glisser dans le sens gauche

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

code:

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

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

Démo: http://jsfiddle.net/IrvinDominin/veER4/