引導輸入組分段移動元素

Question

我有這樣的HTML代碼（使用Bootstrap 3）：

<div class="row"> 
    <div class="col-sm-6"> 
     <h3 class="text-info">Part title</h3> 
     <div class="col-sm-4"> 
      <div class="input-group input-group-lg"> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-default" disabled="disabled">3</button> 
        <button type="button" class="btn btn-info linkInterfaces" style="margin: 0 15px 0 15px !important"><i class="fa fa-chain-broken"></i></button> 
        <button type="button" class="btn btn-default" disabled="disabled">4</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

這jQuery代碼：

$('.linkInterfaces').click(function() { 
    if ($(this).find('i').hasClass('fa-link')) { 
     $(this).animate({'marginLeft': '10px', 'marginRight': '10px'}, 1000); 
     $(this).find('i').removeClass().addClass('fa fa-chain-broken'); 
    } else { 
     $(this).animate({'marginLeft': '0', 'marginRight': '0'}, 1000); 
     $(this).find('i').removeClass().addClass('fa fa-link'); 
    } 
}); 

我做了這個JSFIDDLE，爲您更好地瞭解我問題。

如何確保中間按鈕不會移動，如果您點擊它，那些正在移動的人？

Answer 1

一個解決方案是爲上一個和下一個元素的邊距設置動畫，而不是鏈接元素本身。

因此，不要在中心元素上設置邊距，而是將其設置在它旁邊的元素上。然後，您可以爲前一個元素的邊距設置動畫，以便將邊距從一側轉移到另一側，並刪除中央元素旁邊元素的邊距。

我更新你的jsfiddle，you can find it here.

基本上你會風格的按鈕像這個：

<button type="button" class="btn btn-default" disabled="disabled" style="margin: 0 15px 0 0">3</button> 
<button type="button" class="btn btn-info linkInterfaces"><i class="fa fa-chain-broken"></i></button> 
<button type="button" class="btn btn-default" disabled="disabled" style="margin: 0 0 0 15px">4</button> 

再這樣它們的動畫（注意prev()使用和next()這將讓以前和下一個兄弟元素）：

$('.linkInterfaces').click(function() { 
    if ($(this).find('i').hasClass('fa-chain-broken')) { 
     $(this).prev().animate({'marginRight': '0', 'marginLeft': '15px'}, 1000); 
     $(this).next().animate({'marginLeft': '0'}, 1000); 
     $(this).find('i').removeClass().addClass('fa fa-link'); 
    } else { 
     $(this).prev().animate({'marginRight': '15px', 'marginLeft': '0'}, 1000); 
     $(this).next().animate({'marginLeft': '15px'}, 1000); 
     $(this).find('i').removeClass().addClass('fa fa-chain-broken'); 
    } 
});