Bootstrap输入组分段移动元素

我有这个HTML代码（使用Bootstrap 3 ）：

 
 
Part title
 
 
 
 3  4 
 
 
 
  

而这个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， 你可以在这里找到它。

基本上你会改变这样的按钮的样式：

 3  4 

然后像这样动画它们（注意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'); } });