Question

当我点击绿色div时，一切都隐藏了，但是绿色div是生涩的，就像在第一个绿色div旁边一样生涩的动作。是否可以平滑运输，以便它滑动并将其位置放在第一个绿色div旁边？

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>

Answer 1

也许您可以使用fadeout()

切换hide()

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


});

这是您的fiddle已更新。

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，以便adjecent div移动

Answer 3

诀窍是去除不透明度＆amp;大小，然后隐藏它。

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

如果您的div低于对方，则可以将height设为zero(0)。

Answer 4

你可以试试这个：

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

OR

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

当div隐藏时，顺利移动相邻的div

4 个答案: