当一个div隐藏时，平滑移动相邻的div。

Question

Fiddle链接

当我点击绿色区域时，所有东西都会隐藏，但是绿色区域很卡顿，它通过一个不连贯的动作来到第一个绿色区域的旁边。有没有可能进行平滑的过渡，使它可以滑动并直接放在第一个绿色区域旁边？

JS代码：

$('.green').click(function(){
    $('.others').fadeOut();
});

CSS：

.green{ background:green; padding:10px; margin:10px; }
.red{ background:red; padding:10px; margin:10px; }
.blue{ background:blue; padding:10px; margin:10px; }
.green:hover{ cursor:pointer;}
.fade{display:none; opacity:0;}
div{ float:left; }

HTML:

<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>
<div class="green"></div>
<div class="red others"></div>
<div class="blue others"></div>

- AspiringCanadian

---

我相信你需要使用绝对定位，然后使用jQuery动画使每个div基于其位置'滑动'以响应上一个div折叠释放出的新空间。在这里查看animate（）函数：https://api.jquery.com/animate/ - WASasquatch

有没有其他方法可以避免使用position:absolute？这是一个响应式设计，所以定位元素会产生问题。 - AspiringCanadian

Answer 1

也许你可以使用hide()替换fadeout()

$('.green').click(function(){
$('.others').hide(300);


});

这里是您的代码片段已更新。

- Fizor

---

这是一个很好的答案。使用 $('.others').hide(800); 后，它看起来非常流畅。 - urbz

@Urbz.. 是的，它可以 ;) 祝你周五愉快！！ - Fizor

@Mike..祝你周五快乐 :) - urbz

Answer 2

$('.green').click(function(){
    $('.others').animate({
        "margin-left":0,
        "margin-right":0,
        "padding-left":0,
        "padding-right":0,
        width:0,
    }, 300);
});

http://jsfiddle.net/2un99/5/

执行动画，清除边距和填充，将宽度动画化为0，以便相邻的div一起移动。

- waplet

Answer 3

技巧在于去除透明度和尺寸，然后隐藏它。

$('.green').click(function(){
    $('.others').animate({'opacity':0},200,function(){
        $(this).animate({'width':0},200,function(){
            $(this).hide();
        });
    });
});

如果您的 div 元素彼此相邻，则可以将 height 动画设置为 zero(0)。

- demonofthemist

---

当我在这个fiddle中替换这个函数时，什么也没有发生。 - AspiringCanadian

@Harmeet 抱歉，缺少一个）括号。现在请检查。根据您的需求将时间更改为200毫秒。 - demonofthemist

它的工作方式与我最初发布的这个一模一样：http://jsfiddle.net/2un99/2/没有任何改变。 - AspiringCanadian

@Harmeet，这是因为您使用填充和边距创建了div，我假设您正在使用宽度/高度。因此，您还必须动画化填充和边距。请参见此http://jsfiddle.net/2un99/10/。 - demonofthemist

@rohanAM 谢谢！你的解决方案正是我在寻找的。 - Raj

Answer 4

你可以尝试这个：

$('.green').click(function(){
    $('.others').fadeOut("slow");
});

或者

this:$('.green').click(function(){ $('.others').hide("literal"); });

- Geeky Ninja

---

你没有理解问题，第二个绿色div突然出现并与第一个绿色div并排放置。淡入时间在这里不是问题。 - AspiringCanadian

在这种情况下，您可以尝试这样做：$（'.green'）.click(function（）{ $（'.others'）.hide（“literal”）; }）; - Geeky Ninja