可変幅のdivの右から左へのスライドアウト。

Question

私は現在、可変幅のdivを右から左にスライドアウトするのに苦労しています。

この問題は、スライドdivと一緒にボタンをアニメーション化しています（下の例を参照）。

http://camoconnell.com/things/slideoutleft/

注 - 幅は、静的、動的ではありません。あなたのHTMLが構造化されている方法では、事前に

おかげで、

Answer 1

Here's a working example。あなたがバットからすぐに考えているほど単純ではありません。

Answer 2

あなたは（.animateを行う必要があります）動的なdiv要素の幅にし、あなたのカウンターをスライドされているどんな長さの負にwidthプロパティを設定します

.animate({width: -50}) 

にdivが右あなたのスライダーの呼び出しの前または後にこの呼び出しを行います。

もう一つの提案は、ボタンとカウンタ要素をラッパー要素に入れ（これはHTMLの再構成が必要です）、そのラッパー要素をスライドさせるだけです。

Answer 3

簡単な解決策は、アニメーションをラッパーdivに適用することです。だからあなたのslideRightShowに、あなたが持つことができます。

$('#caption').show(); 
$('#caption-wrap').show('slide', {direction: 'right'}, 1000); 

Answer 4

これは、別の解決策のようになります。

HTML：

<div class="test" id="hithere">Hi there, <a href="#" id="hide">Hide me</a></div> 
<a href="#" id="show">Show me</a> 

CSS：

.test { 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 10px; 
    position: absolute; 
    visibility: hidden; 
} 

JS

var variableWidth; 

$(window).load(function() { 

// gets complete element width (including margins), moves it out of the screen and sets visibility to its default 
    variableWidth = $('#hithere').outerWidth(true); 
    $('#hithere').css("left", variableWidth * -1); 
    $('#hithere').css("visibility", "visible"); 
}); 

$("#show").click(function() { 
    $('#hithere').animate({left: 0}, 400); 
    }); 

$("#hide").click(function() { 
     $('#hithere').animate({left: variableWidth * -1}, 400); 
     });