使用jQuery從一個按鈕的'後面'滑動div（從左到右）

使用本指南的最後一個示例（http://www.learningjquery.com/2009/02/slide-elements-in-different-directions），我試圖讓div切換按鈕後面的按鈕。使用jQuery從一個按鈕的'後面'滑動div（從左到右）

預期結果示例：最初，包含輸入字段，按鈕B和按鈕C的div將被隱藏。當單擊「滑動它」按鈕時，div會在按鈕後面的FROM中滑動，直到div的右側和「滑動它」按鈕之間達到特定的距離（邊距）。再次單擊按鈕（和/或按下'Esc'鍵時），div將滑動到「按鈕」中。

這裏是腳本，然後是演示：

$('#button1').click(function() { 
    var $marginRighty = $('.inner'); 
    $marginRighty.animate({ 
     marginRight: parseInt(
      $marginRighty.css('marginRight'),10) == 0 ? 
       $marginRighty.outerWidth() : 0}); 
});

https://jsfiddle.net/ishq786/xqb5a7dq/

來源

2016-01-20 Ali

小提琴：https://jsfiddle.net/xqb5a7dq/6/

$('#button1').on('click', function() { 
 
\t animateDiv(); 
 
}) 
 

 
$(document).keyup(function(e) { 
 
\t if (e.keyCode === 27 && $('.inner').hasClass('visible')) { 
 
\t \t animateDiv(); 
 
\t } 
 
}) 
 

 
function animateDiv() { 
 
\t $('.inner').toggleClass('visible'); 
 
\t $('.inner').animate({ 
 
\t \t width: 'toggle', 
 
\t },350); 
 
}

.toolbar { 
 
    width: 100%; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    margin: 0px auto; 
 
    padding: 5px 0px; 
 
    background-color: skyblue; 
 
} 
 

 
#divA, 
 
#divB { 
 
    display: inline; 
 
} 
 

 
.inner { 
 
    float: right; 
 
    display: none; 
 
\t padding-right: 20px; 
 
} 
 

 
#button1 { 
 
    float: right; 
 
    margin-right: 5px; 
 
} 
 

 
input, 
 
button { 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='toolbar'> 
 
    <div> 
 
     <button id="button1">Slide it</button> 
 
    </div> 
 
    <div class="inner is-hidden"> 
 
     <div id="divA"> 
 
      <input type="text" /> 
 
      <input type="password" /> 
 
     </div> 
 
     <div id="divB"> 
 
      <button>Button B</button> 
 
      <button>Button C</button> 
 
     </div> 
 
    </div> 
 
</div>

來源

2016-01-20 18:30:35

謝謝！這更符合我所尋找的內容。有沒有辦法讓它看起來像div來自按鈕？或者你認爲這種方式看起來更加優雅嗎？ – Ali

這是個人喜好。要使它從按鈕滑動，請從按鈕中刪除邊距，並將其作爲填充添加到內部div：https://jsfiddle.net/xqb5a7dq/3/ –

@Ali - 請參閱https://jsfiddle.net/ xqb5a7dq/6 /用於ESC鍵功能。 –

Fiddle。

我解決了你的一些問題。我承認我並不確定你希望結果如何，所以我會把你的調整留給你。但有兩個主要的東西;

我已經使用CSS來獲得一個在另一個之上。我定位內部div 100％權利，position: relative，並且頂部的按鈕現在有其右側的父div設置爲position: absolute，以便它可以重疊而沒有足跡。我從字面上移動了HTML中較低的按鈕，所以我不必與z-index混淆，哈哈。
我把你的Javascript移動到了一個單獨的函數中，所以你可以通過按鍵或者你喜歡的方式調用它。這意味着你不會有代碼重複。

來源

2016-01-20 18:16:16 Thomas

謝謝。幾件事情：1）div對於不同的頁面寬度工作不同，2）可以看到從右側來到並在按鈕後面滑動。我想讓div被按鈕「吃掉」 - 不要越過按鈕。 – Ali

使用jQuery從一個按鈕的'後面'滑動div（從左到右）

回答

相關問題