Question

我有两个buttons，它们以强制在父元素上的文本对齐中心为中心。右边的按钮在某些时候会被.fadeOut()淡化。

fadeOut发生后，左侧元素位于中心。但是没有动画。我在左侧元素上添加了all 0.3s ease-in-out的css转换，但它仍然不起作用，因为左侧元素的样式并没有真正改变。

有关如何使用我当前的样式进行操作的任何想法？

<div class="nav">
    <div class="nav-btn one">button 1</div>
    <div class="nav-btn two">button 2</div>
</div>

$('.nav-btn.two').on('click', function(e){
    $(this).fadeOut();
});

.nav
{
    width : 100%;
    text-align : center;     
}
.nav-btn
{
    display : inline-block;
    padding : 10px;
    background : #252525;
    color : #fff;
}

我想将左按钮设置为动画，而不是将其移动到与中心对齐。

Answer 1

根据我的经验，这种DOM操作根本无法触发动画。根据您的描述，您不应该使用.fadeOut（），而是尝试使用减少该元素宽度的动画。不要忘记消除边距（使用包裹元素和填充代替）以及目标元素上的填充（否则宽度动画为0将不会很好）。

$('.button').on('click', function() {
    $(this).css({
        'overflow': 'hidden',
    }).animate({
        'width': 0
    }, 350, function() {
        $(this).hide();
    });
});

如果您不喜欢这种方法，您可能需要使用绝对定位重新设计按钮。

Answer 2

我已经更新了小提琴以提供动画，将按钮移动到中心位置。

代码段：

$('.nav-btn.two').on('click', function(e){
    $(this).fadeOut();
    $('.nav-btn.one').animate({'margin-left':'+=90px'
     });
});

Fiddle Link

在具有文本对齐中心的父级中从左到右为按钮设置动画

2 个答案: