左右滑動和使用jQuery或CSS

請看看演示網站：

kotechweb.com/new_focus/

在左側有一個主菜單，當切換，話現在的問題是擠壓和隱藏，這是我如何實現：

var is_closed = false; 
       $("#menu_btn").on("click", function() { 
        if (is_closed) { 
         $(".nav_bar ul").css("width", "75%"); 
        } else { 
         $(".nav_bar ul").css("width", "0"); 
        } 
        is_closed = !is_closed; 
       });

CSS：

transition: all 1s;

所以邏輯是使用過渡來實現幻燈片動畫，但是，這種方法文本擠壓寬度較小時。

如何讓文本向左滑動？

來源

2015-10-24 user782104

使用。 'animate' – Tushar

您可以創建一個「面具」使用

#menu_right{ 
overflow:hidden; 
    ... 
}

和移動你的菜單是這樣的：

var is_closed = false; 
      $("#menu_btn").on("click", function() { 
       if (is_closed) { 
        $(".nav_bar ul").css("margin-left", "-100%"); 
       } else { 
        $(".nav_bar ul").css("margin-left", "-0%"); 
       } 
       is_closed = !is_closed; 
      });

我覺得這就像espected

來源

2015-10-24 16:56:07 cesare

感謝您的幫助，使用保證金比以前好得多 – user782104

也許你應該.hide()側邊欄崩潰時的文字。希望這可以幫助。

來源

2015-10-24 16:51:55 karva

首先，代替使用CSS轉換在JQuery中使用animate，因爲它允許更多的功能。

我實際上爲我的幻燈片菜單添加了overflow-x: hidden到我的身體標記。然後，我將該菜單放置在頁面的外部，因此我將它的CSS值設置爲right: 0，以將其置於頁面左側外側。

這是什麼讓我做的是，當用戶點擊菜單按鈕，你可以動畫菜單中通過簡單地改變right值滑出，所以你的最終代碼會是這個樣子

$("#menu_btn").on("click", function() { 
      if (is_closed) { 
         $("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000); 
        } else { 
         $("#slideoutMenu").animate({right:"0"}, 1000); 
        } 
        is_closed = !is_closed; 
       });

來源

2015-10-24 17:03:22

只需使用jquery和jquery ui：Here 頂部參考下面的代碼。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

而在腳本只補充一點：

$(".nav_bar ul").toggle("slide");

或者也可以使用自定義時間延遲毫秒單位使用。

$(".nav_bar ul").toggle("slide",2000);

來源

2015-10-24 17:12:24

左右滑動和使用jQuery或CSS

回答

相關問題