Question

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

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

为所有div提供相同的通用类
创建＆＃34; 隐藏＆＃34;用于设置隐藏div
选择具有相同通用类的first() div，而不使用＆＃34; 隐藏＆＃34;类
应用＆＃34; 隐藏＆＃34;上课

请参阅此代码段：

＆＃13;

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

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

以下是您玩的小提琴：http://jsfiddle.net/abhitalks/L12yte6r/5/

更新

如果您想在滑动div之前等待，而不是隐藏和滑动，则需要链接转换。看到这个片段，它首先隐藏然后等待，然后滑动其余的div。

请注意，唯一的变化是过渡：

而不是：

transition: 1s all;

现在变为：

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

请参阅下面的代码 ：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

更新小提琴：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/

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

2 个答案:

更新