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

Question

所以我一直为此伤脑筋。我知道执行此操作相当容易，但我似乎无法理解它。看看这个 fiddle 。

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(){

        });

    });
});

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

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>

这里有一个 fiddle 供您使用: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>

更新 fiddle :http://jsfiddle.net/abhitalks/L12yte6r/11/