jquery show/hide 同一行的按钮显示不漂亮 - 在动画期间导致半高？

Question

我正在尝试显示一个“编辑”按钮，然后在单击时子按钮会切换。

问题是在动画期间，两个部分都变为半高。这可能是与 Bootstrap css 的冲突，或者是我尝试与 spans/divs 的某种组合。想不通。

另外我认为幻灯片动画可能使用了浮动，这可能会产生一些影响。

希望可以通过更改 html（更改 divs/spans 或其他，顺序？）而不是某些 css 覆盖来解决，如果可能的话？

[编辑]

点击隐藏按钮并显示其他按钮

[取消][其他][保存]

jsfiddle: http://jsfiddle.net/1s8e5kj5/2/

css:

<div class="col-xs-9">
<div style="display:inline-block">
    <button class="btn btn-default" data-bind="click: TempRunFunction">run</button>
</div>
<span>
    <span id="view-edit">
        <button class="btn btn-primary" onclick="showEdit();">Edit</button>
    </span>
    <span id="view-edit-buttons" class="" style="display:none;">
        <button class="btn btn-success">Save</button>
        <button class="btn btn-warning">Arrange</button>

js

var speed = 1000;

function showEdit() {
  $('#view-edit').hide('slide', { direction: 'left' }, speed);
  $('#view-edit-buttons').show('slide', { direction: 'left' }, speed);
}

function hideEdit() {
  $('#view-edit').show('slide', { direction: 'left' }, speed);

css：none 已覆盖 bootstrap v3

理想情况下：

[Edit]
[Edi..[canc..
[Ed.[cancel] [ot..
[cancel] [other] [save]

非常感谢

Answer 1

将此添加到您的 CSS：

#view-edit, #view-edit-buttons {
    margin-bottom: 20px;
}

解决了动画添加到您的 span 的时髦显示效果。

如果以不止一种方式出现此显示问题，您应该尽可能彻底地进行测试。

Answer 2

将pull-left class 添加到按钮的容器中，并使用complete 功能。

var speed = 1000;

function showEdit() {
    $('#view-edit').hide('slide', {direction: 'left'}, speed/4, function(){
        $('#view-edit-buttons').show('slide', {direction: 'left'}, speed);
    });
}

function hideEdit() {
    $('#view-edit-buttons').hide('slide', { direction: 'left' }, speed, function(){
        $('#view-edit').show('slide', {direction: 'left'}, speed/4);
    });
}

http://jsfiddle.net/1s8e5kj5/4/

Answer 3

您需要添加一个 display:inline-block; 到 span 来包裹您正在制作动画的两个东西。我创建了一个名为 btn-container 的 class 并将其应用于包装这两个东西的跨度。

接下来你应该添加这个样式：

#view-edit, #view-edit-buttons{
    position:absolute;
    top:0;
}

...这有助于正确定位按钮包装器，以便动画可以正常工作。

See demo here

jquery show/hide 同一行的按钮显示不漂亮 - 在动画期间导致半高？

jquery show/hide buttons on same row not showing pretty - causing half hight during animation?

css

jquery

show-hide

twitter-bootstrap