Bootstrap输入组分段移动元素 [英] Bootstrap input group segmented move elements

问题描述

我有这个HTML代码(使用 Bootstrap 3 ):

I have this HTML code (using 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代码:

And this jQuery code :

$('.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 ，以便您更好地理解我的问题.

I've made this JSFIDDLE for you to understand better my problem.

如何确保中间按钮永不移动，如果您单击它，周围的人会移动吗?

How to ensure that the middle button never moves and if you click on it, those who are around move ?

推荐答案

一种解决方案是设置上一个和下一个元素的边距动画，而不是链接元素本身.

One solution is to animate the margins of the previous and next elements instead of the link element itself.

因此，您无需在中心元素上设置边距，而在其旁边的元素上进行设置.然后，您可以为前一个元素的边距设置动画，以便将边距从一侧转移到另一侧，并删除中心元素旁边的元素上的边距.

So instead of setting the margin on the central element, you set it on the elements next to it. You can then animate the margin of the previous element so that the margin is transferred from one side to the other, and remove the margin on the element next to the central element.

我更新了您的JSFiddle，您可以在这里找到它.

I updated your JSFiddle, you can find it here.

基本上，您应该这样对按钮进行样式设置:

Basically you would style the buttons like this instead:

<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()的用法，它们将分别获取上一个和下一个同级元素):

And then animate them like this (note the usage of prev() and next() which will get the previous and next sibling element, respectively):

$('.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输入组分段移动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！