按钮删除第一个 div 并将相邻的 div 滑动到其位置

Question

所以我一直在为此打破我的头。我知道这样做很容易实现，但我似乎无法理解它。看看这个小提琴。

http://jsfiddle.net/G9x8V/

$(function(){
    $('.box').on('click', function(){
        $(this).fadeOut(1000, function(){
            $(this).parents('.outer-box').hide(1000);
        });
    });
});

现在如何添加一个按钮来隐藏第一个div 并滑动div 的其余部分以移动到第一个位置。

http://jsfiddle.net/L12yte6r/

$(function(){
    $('.button').on('click', function(){
        $('.box').fadeOut(1000, function(){
        });
    });
});

我已经用上面的小提琴中的按钮更新了上面的代码。

Answer 1

1. 为所有div提供相同的泛型类
2. 创建一个"隐藏"类来设置隐藏div的样式
3. 选择具有相同泛型类而不带"隐藏"类的first() div
4. 将"隐藏"类应用于它

请参阅此代码片段：

$(function () {
    $('.button').on('click', function () {
        $(".outer-box1").not(".hidden").first().addClass("hidden");
    });
});

.container { width: 400px; }
.box {
    width: 100%;
    height: 120px;
    background: red;
    float: left;
}
.outer-box1 {
    width: 20%;
    height: 120px;
    margin-left: 2.5%;
    float: left;
    opacity: 1;         /* to display:none won't allow transition animation */
    overflow: hidden;   /* to prevent children to overflow when size is 0 */
    transition: 1s all; /* to animate the effects */
}
.hidden {
    opacity: 0;  /* to hide without display:none to allow transition */
    width: 0px;  /* effectively hide by reducing size and allow transition */
    margin: 0px; /* to properly align rest of the divs */
}
button {
    margin: 4px; /* just to separate button from divs */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="outer-box1"><div class="box">1</div></div>
    <div class="outer-box1"><div class="box">2</div></div>
    <div class="outer-box1"><div class="box">3</div></div>
    <div class="outer-box1"><div class="box">4</div></div>
</div>
<button class="button">Click</button>

这里有一个小提琴供您玩：http://jsfiddle.net/abhitalks/L12yte6r/5/

---

更新：

如果您想在滑动

div 之前等待，而不是隐藏和一起滑动，您需要链接过渡。请参阅此代码段，它首先隐藏然后等待，然后滑动其余的div。

请注意，唯一的更改是在转换中：

而不是：

transition: 1s all;

它现在变成：

transition: opacity 1000ms, 
    width 500ms linear 1000ms, 
    margin 500ms linear 1000ms;

请参阅下面的代码片段：

$(function () {
    $('.button').on('click', function () {
        $(".outer-box1").not(".hidden").first().addClass("hidden");
    });
});

.container { width: 600px; }
.box {
    width: 100%;
    height: 120px;
    background: red;
    float: left;
}
.outer-box1 {
    width: 20%;
    height: 120px;
    margin-left: 2.5%;
    float: left;
    opacity: 1;
    overflow: hidden;
    transition: opacity 1000ms, 
        width 500ms linear 1000ms, 
        margin 500ms linear 1000ms;
}
.hidden {
    opacity: 0;
    width: 0px;
    margin: 0px;
}
button {
    margin: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="outer-box1"><div class="box">1</div></div>
    <div class="outer-box1"><div class="box">2</div></div>
    <div class="outer-box1"><div class="box">3</div></div>
    <div class="outer-box1"><div class="box">4</div></div>
</div>
<button class="button">Click</button>

更新的小提琴：http://jsfiddle.net/abhitalks/L12yte6r/11/

Answer 2

使用此代码

<style>
.container {
    width: 600px;
}
.box {
    width: 20%;
    height: 120px;
    margin-left: 2.5%;
    background: red;
    float: left;
}
</style>
<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>
<script>
$(function(){
   $('.box:visible').first().fadeOut(1000, function(){
    });
    });
});
</script>

http://jsfiddle.net/L12yte6r/4/