從右側滑動div到左側<

我一直在尋找一個我認爲已經存在的代碼片段。我發現了很多不同的變體，但其中沒有一個最適合我。我試圖修改jsfiddles發現並修改其他示例，但無濟於事。從右側滑動div到左側<

因爲我幾乎沒有使用javascript和jquery語言的經驗，所以我希望這裏有人能幫上忙。

在我當前的項目中，我有一個頁面，其中加載了所有的內容。目前我有六個div全部隱藏在屏幕右側。垂直導航菜單坐在左側。我想要的是，當點擊與分配的div的鏈接時，目標div在屏幕上從右向左滑動並停在導航菜單旁邊。

但是，扭曲，當一個新的鏈接被點擊的前一個div的內容滑出屏幕允許新選擇的div取代它。

希望我已經很好地解釋了我自己。

內容的div我想滑動是=

ID = 「內容的一個」

ID = 「內容的兩個」

等。

在正確的方向任何解決方案或指針將extreamly有用很多預先感謝。

這就是我最初試圖修改，但我沒有成功...

$(document).ready(function(){ 
    $("#navigation li a").on("click", function(e){ 
    e.preventDefault();`enter code here` 
    var hrefval = $(this).attr("href"); 

    if(hrefval == "#content-one") { 
     var distance = $('#container').css('right'); 

     if(distance == "auto" || distance == "0px") { 
     $(this).addClass("open"); 
     activateSlider(); 
     } else { 
     deactivateSlider(); 
     } 
    } 
    }); // end click event handler 

// $("#closebtn").on("click", function(e){ 
// e.preventDefault(); 
// closeSidepage(); 
// }); // end close button event handler 

    function activateSlider() { 
    $('#container').animate({ 
     right: '350px' 
    }, 400, 'easeOutBack'); 
    } 

    function deactivateSlider(){ 
    $("#navigation li a").removeClass("open"); 
    $('#container').animate({ 
     right: '0px' 
    }, 400, 'easeOutQuint'); 
    } 
});

來源

2013-10-07 Beaniie

看看[動畫]（http://api.jquery.com/animate/）財產jQuery的。您可以簡單地爲正確的屬性設置動畫。 *首先讓我們看看你已經嘗試了一些東西* – nkmol

這就是我曾試過的。當時看起來很簡單，但我並不完全理解代碼。 – Beaniie

我建議你遵循tuturiol而不是採取其他人的片段，goodluck :) – nkmol

嘗試這樣，

HTML

<div id="panel" class="panel"> 
     content 
</div> 
<!-- Trigger --> 
<a id="trigger" class="trigger">click here </a>

的

CSS

.panel { 
     width:85%; 
     padding:2%; 
     position:fixed; 
     right:-89%; 
     top:46px; 
     z-index:2; 
     background: #2F2F2F ; 
     -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); 
     box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); 
     border-radius: 1% 1% 1% 1%; 
     border-radius: 5px; 
    } 
    .trigger { 
     width:8%; 
     text-align:center; 
     color:goldenrod; 
     position:absolute; 
     top:26px; 
     padding:0.5% 0%; 
     border-top-left-radius: 10px; 
     border-bottom-left-radius: 10px; 
     -moz-border-radius-bottomleft: 10px; 
     -moz-border-top-left-radius: 10px; 
     -webkit-border-bottom-left-radius: 10px; 
     -webkit-border-top-left-radius: 10px; 
     background:#2F2F2F ; 
     right:30%; 
    }

這裏.panel您滑動divclass

JS Fiddle

來源

2013-10-07 06:46:54

我會給它一個旋轉謝謝。 – Beaniie

輕微的問題，它似乎是卡住我點擊按鈕一個div只是抖動右然後快速離開約2像素，然後停止..任何想法？ – Beaniie

已更新'jsfiddle' –

從右側滑動div到左側<

回答

相關問題