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

【问题标题】：How do I utilize JQuery to create a sliding effect when a box is removed?移除框时如何利用 JQuery 创建滑动效果？
【发布时间】：2013-04-13 02:36:39
【问题描述】：

在这里看我的小提琴：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 实现这一点？

【问题讨论】：

标签： javascript jquery jquery-ui slide

【解决方案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/

【讨论】：

【解决方案2】：

在回调中使用：.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

});

【讨论】：

哇，谢谢@roXon。我可以查看任何资源来自定义演示 #2 中的滑动效果吗？
@AAA 取决于您希望它“自定义”的方式。有什么想法吗？
希望效果更平滑，或者一些独特的东西。
@AAA 好吧，别问我，先弄清楚什么是“独特”:)
明白了。如果它消失，然后下一个盒子取代它呢？

【解决方案3】：

看到这个

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

这是我的尝试。我喜欢它，因为它实际上是在镜像幻灯片（不改变宽度）。 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);
});

【讨论】：