javascript - 移除框时如何利用 JQuery 创建滑动效果？

Question

在这里查看我的小提琴：http: //jsfiddle.net/nnHQp/1/

HTML：

 <div class="box box1"><a href=#delete">Delete</a></div>
 <div class="box box2"><a href=#delete">Delete</a></div>
 <div class="box box3"><a href=#delete">Delete</a></div>
 <div class="box box4"><a href=#delete">Delete</a></div>

CSS：

.box {
width: 150px;
height: 300px;
    margin-right: 5px;
}
.box1 {
background-color: tomato;
    float: left;
    display: inline-block;
}
.box2 {
background-color: red;
    float: left;
    display: inline-block;
}
.box3 {
background-color: green;
    float: left;
    display: inline-block;
}
.box4 {
background-color: black;
    float: left;
    display: inline-block;
 }

当其中一个框被删除时，剩下的应该滑动，下一个应该取代它。如何使用 JQuery 实现这一点？

Answer 1

尝试这个：

$("a").click(function(){
    $(this).parent().hide("slow",function() {$(this).remove();});
});

您的 html 格式错误：

<div class="box box1"><a href="#delete">Delete</a></div>
<div class="box box2"><a href="#delete">Delete</a></div>
<div class="box box3"><a href="#delete">Delete</a></div>
<div class="box box4"><a href="#delete">Delete</a></div>

jsFiddle：http: //jsfiddle.net/hescano/nnHQp/8/

Answer 2

实际的“幻灯片”效果 - 其他答案中未提供 - 将为宽度设置动画，如下所示：http: //jsfiddle.net/BramVanroy/nnHQp/15

$("a").click(function(){
    var $this = $(this);

    $this.parent().animate({
        "width": 0
    }, 700, function() {
        $this.remove();
    });
});

Answer 3

Here's my attempt. I like it because it's actually mirroring a slide (not altering the width). YMMV:

$('.box a[href=#delete]').click(function(event) {
    event.preventDefault();
    var boxes = $('.box');
    var box = $(this).parent('.box');
    box.css('visibility','hidden').next().animate({
        marginLeft: '-='+box.width()
    },400);
});

Answer 4

使用：.slideUp()和.remove()回调。

LIVE DEMO

您"的 HTML 中缺少一个，因此应该如下所示：

<div class="box box1"><a href="#delete">Delete</a></div>

jQuery：

$('[href=#delete]').click(function(){
    var myParent = $(this).closest('.box');
    myParent.slideUp(800, function(){
        myParent.remove();
    });
});

另一种使用方式.animate()： LIVE DEMO 2

$('[href=#delete]').click(function(){
    var myParent = $(this).closest('.box');
    myParent.animate({width:'toggle'}, 800, function(){
        myParent.remove();
    });
});

确保将您的 jQuery 代码包装到一个document ready函数中：

$(function(){ // DOM is now ready to be manipulated

    // code here

});

Answer 5

看到这个

http://jsfiddle.net/nnHQp/11/

   $('a').click(function(){
       $(this).parent().hide('slow');
   });