使用相同的圖像滑入和滑出div的權利 - jQuery

Question

需要一些JQuery幫助...

我想從右側滑動div，使用25％的屏幕寬度。 如何使用相同的'＃trigger-left a'滑出div？ （即寬度：0像素）

JQuery的：

$(function() { 
    $("#trigger-left a").click(function(){ 
     var rightCol = $("#right-col"); 
      rightCol.animate({width:'25%'},350); 
     return false; 
    }); 
}); 

HTML：

<div id="trigger-left"><a href="#"><img src="images/menu-icon.png" border="0"></a></div> 


<div id="right-col">Content right column</div> 

期待您的解決方案！

Answer 1

試試這個：

$(function() {  
    $("#trigger-left a").click(function(){ 
    var rightCol = $("#right-col"); 
     if(rightCol.width()==0) 
     { 
      rightCol.animate({width:'25%'},350); 
     } 
     else 
     { 
      rightCol.animate({width:'0%'},350); 
     } 

    return false; 
    }); 
}); 

Answer 2

最簡單的方法是隻跟蹤它在什麼狀態這樣可以保持方向前進，如果點擊了一個過渡的中間，如果使用寬度可能是不可能的。

$(function() { 
    var triggered = false; 
    $("#trigger-left a").click(function(){ 
     var rightCol = $("#right-col"); 
     if(!triggered){ 
      rightCol.animate({width:'25%'},350); 
      triggered = true; 
     } else { 
      triggered = false; 
      rightCol.animate({width:'0%'},350); 
     } 

     return false; 
    }); 
}); 

Answer 3

如果你的意思是通過點擊相同的鏈接div將滑出。 給你：

$(function() { 
    var div = $("#"right-col"); 
    $("#trigger-left a").click(function (e) { 
     if ($(div).width() != 0) { 
      $(div).animate({width:'0px'},350); 
     } else { 
      $(div).animate({width:'25%'},350); 
     } 
    }); 
}); 

嘗試，如果它不工作，我會編輯我的答案。祝你好運;）