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

请看我的小提琴：

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>

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

试试以下方法：

$("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>

jsiddle:

试试这个：

$("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>

jsiddle:

请参见此

看到这个了吗

---

其他答案中未提供的实际幻灯片效果是设置宽度动画，如下所示：

---

其他答案中未提供的实际幻灯片效果是设置宽度动画，如下所示：

在回调中使用：和

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

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

使用.animate的另一种方法：

确保将jQuery代码包装到文档就绪函数中：

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

    // code here

});

在回调中使用：和

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

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

使用.animate的另一种方法：

确保将jQuery代码包装到文档就绪函数中：

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

    // code here

});

---

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

---

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

---

哇，谢谢@roXon。我可以查看任何资源来定制演示2中的滑动效果吗？@AAA取决于您想要定制的方式。有什么想法吗？我很想让效果变得更平滑或者更独特。@AAA好吧，别问我，先想想什么是独特的：明白了。让它消失，然后下一个盒子取代它怎么样？哇，谢谢@roXon。我可以查看任何资源来定制演示2中的滑动效果吗？@AAA取决于您想要定制的方式。有什么想法吗？我很想让效果变得更平滑或者更独特。@AAA好吧，别问我，先想想什么是独特的：明白了。它逐渐消失，然后下一个盒子取代它，怎么样？