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

Bootstrap输入组分段移动元素

1 个答案: