jQuery glisser vers la droite/gauche

Question

Je le suivant JS:

$(document).ready(function() { 
    $(".LeftColumn").hide(); 
    $(".SidebarToggle").toggle(function() { 
     $(this).addClass("active"); 
     $(this).text("Hide Sidebar"); 
     $(this).attr("title", "Hide Sidebar"); 
     //$(".LeftColumn").fadeIn("fast"); 
     $(".LeftColumn").show("slide", { direction: "left" }, 100); 
     return false; 
    }, 
    function() { 
     $(this).removeClass("active"); 
     $(this).text("Show Sidebar"); 
     $(this).attr("title", "Show Sidebar"); 
     //$(".LeftColumn").fadeOut("fast"); 
     $(".LeftColumn").hide("slide", { direction: "left" }, 100); 
     return false; 
    }); 

Ce qui montre essentiellement et cache un div avec une classe de LeftColumn. Le problème que j'ai est que LeftColumn flotte à gauche et j'ai une autre div appelée Middle Column qui flotte à côté de lui. Mais quand je fais l'animation, LeftColumn fait une belle diapositive d'assouplissement mais le MiddleColumn va s'introduire et disparaître pour remplir le vide. Comment puis-je faire en sorte que MiddleColumn fasse des allers-retours par rapport à LeftColumn (en gardant à l'esprit que MiddleColumn n'a pas de largeur définie).

Merci

Answer 1

connaissez-vous la largeur de la colonne de gauche, celui qui montre/cache? Si oui, vous pouvez définir la position: absolute sur la colonne du milieu, puis animer sa valeur "left" en faisant glisser la colonne de gauche. Ai-je un sens?

EDIT: Je crois que le problème est dû à float: à gauche sur la colonne du milieu. Si la colonne de gauche ne serait pas là, la colonne du milieu serait affichée sur le plus à gauche. Ainsi, pendant que l'animation dure, elle pense à la colonne de gauche comme si elle était là. Une fois l'animation terminée, la colonne de gauche est masquée, les éléments sont réalignés et vous obtenez l'effet d'accrochage.

Donc, en supposant que votre place de marque est quelque chose comme ceci:

<div style="position:relative;"> 
    <div class="LeftColumn" style="float:left;"></div> 
    <div class="MiddleColumn" style="position:absolute;left:200px;"></div> 
</div> 

maintenant dans votre javascript pour montrer:

$(".LeftColumn").show("slide", { direction: "left" }, 100); 
$(".MiddleColumn").animate({'left': '200'}, 100); 

et pour se cacher:

$(".LeftColumn").hide("slide", { direction: "left" }, 100); 
$(".MiddleColumn").animate({'left': '0'}, 100); 

Ainsi, alors que animant la peau de la colonne de gauche, vous animez aussi la position de votre colonne du milieu. (Je suis confus sur la raison pour laquelle vous êtes en train d'animer la direction: "left" dans hide and show.)