javascript - 右から左へのjQuerySlideOut関数

Question

「左から右へ」のコードを変更して、jQueryの右側から関数をスライドアウトしようとしていますが、正しく機能していません...変更する正しい方向を教えてください...

http://jsfiddle.net/egUHv/

現在、私はこのコードを使用しています...

$(function() {
    $('#nav').stop().animate({'marginRight':'-100px'},1000);

    function toggleDivs() {
       var $inner = $("#nav");
       if ($inner.position().right == "-100px") {
           $inner.animate({right: 0});
           $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
       }
       else {
           $inner.animate({right: "100px"}); 
           $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
       }
    }
    $(".nav-btn").bind("click", function(){
        toggleDivs();
    });

});

Answer 1

これを試してください：http://jsfiddle.net/egUHv/5/

$(function() {
$('#nav').stop().animate({'margin-right':'-100px'},1000);

function toggleDivs() {
var $inner = $("#nav");
if ($inner.css("margin-right") == "-100px") {
    $inner.animate({'margin-right': '0'});
    $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
}
else {
    $inner.animate({'margin-right': "-100px"}); 
    $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
}
}
$(".nav-btn").bind("click", function(){
    toggleDivs();
});

});

Answer 2

非常に簡単な解決策：

$(function() {
  $('#div').ToggleSlide();
});

$.fn.ToggleSlide = function() {
    return this.each(function() {
        $(this).css('position', 'absolute');

        if(parseInt($(this).css('right')) < 0) {
            $(this).animate({ 'right' : '-100px' }, 1000, function() {
                $(this).css('position', 'relative');
            });
        }
        else {
            $(this).animate({ 'right' : '0px' }, 1000, function() {
                $(this).css('position', 'relative');
            });
        }
    });
});

ここで行うこと: 関数呼び出しでアイテムの位置を「絶対」に設定して、簡単にアニメーション化できるようにします。アイテムが負の 'right' (既に右に移動されている) を持っているかどうかをチェックし、true の場合はアニメーション化して 0 に戻し (右から左への動き)、そうでない場合は '-right' (左から右への動き) にアニメーション化します）。アニメーションが完了したら、アイテムの位置を「相対」に設定して、その寸法を使用できるようにします。