從右到左的jQuery SlideOut功能

Question

我試圖通過改變代碼爲「從左到右」的代碼，但它不能正常工作......你可以給我正確的方向來修改...

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

一個非常簡單的解決方案：

$(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'); 
      }); 
     } 
    }); 
}); 

我們在這裏做什麼： 在函數調用中，我們將項目的位置設置爲'絕對'，這樣我們就可以輕鬆創建動畫。 我們檢查項目是否具有負'右'（已經移動到右邊），如果爲真，則動畫回到0（從右到左運動），否則我們動畫爲'右'（從左到右運動）。一旦動畫完成，我們將項目的位置設置爲「相對」，以便我們可以使用它的尺寸。

Answer 2

剛剛看到這個鏈接將是有益http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

或使用該

$("div").click(function() { 
      $(this).show("slide", { direction: "left" }, 1000); 
    }); 

參考：http://docs.jquery.com/UI/Effects/Slide

Answer 3

試試這個：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(); 
}); 

});