引导输入组分段移动元素

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'); 
    } 
});