Question

我有一个容器div和一个数组。首先，我将3 div放在容器div的前面。然后3秒钟后，我删除了第三个div，然后使用jquery animate将剩下的2个div过渡到右侧，然后添加了一个新的div。

问题新添加的div没有添加到我想要的位置，现在新添加的div与其余的2 div之间有很大的空间。此外，还会出现垂直滚动条，

$(document).ready(function()
{
    addBoxes();

    setInterval(function() { removeBox(); }, 3000)
});

var boxArray = [
    {name: "Box 1",},
    {name: "Box 2",},
    {name: "Box 3",},
    {name: "Box 4",},
    {name: "Box 5",},
    {name: "Box 6",},
    {name: "Box 7",},
    {name: "Box 8",},
    {name: "Box 9",},
    {name: "Box 10",},
    {name: "Box 11",},
]

function addBoxes()
{
    for (var i = 0; i <= 2; i++)
    {
        $(".container").prepend("<div class='box animated fadeInLeft faster'>"+ boxArray[i].name +"</div>");
    }

    boxArray.splice(0, 3);
}

function removeBox()
{
    if (boxArray.length === 0)
    {
    }
    else
    {
        var card = $(".container .box:nth-child(3)");
        card.addClass("animated fadeOutRight faster").one(function()
        {
            card.unbind().remove();
        })

        //addSingleBox();
        animateRemainingBox();

        setTimeout(function()
        {
            addSingleBox();
        }, 400)
    }
}

function addSingleBox()
{
    $(".container").prepend("<div class='box'>"+ boxArray[0].name +"</div>");
    boxArray.shift();
}

function animateRemainingBox()
{
    $(".box").animate({left: $(".box").width()})
}

.container {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

.box {
    height: 80%;
    width: 32%;
    border: 1px solid black;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    background: rgb(239, 242, 244);
    box-shadow: 4px 8px 16px #808080;
    display: inline-block;

    position: relative;
    overflow: hidden;
}

.box:nth-child(2) {
    margin-left: 1.7%;
    margin-right: 1.7%;
}

.box:nth-child(1) {
    margin: 0px;
}

.box:nth-child(3) {
    margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
</div>

Answer 1

尝试使用在第3个div之后隐藏的静态元素（基本上是任何东西），并再次为其赋予ID，无论您选择什么。使用Javascript函数通过.insertBefore（）动态添加下一个div。传递给函数的参数是该静态元素的ID。

    $rootScope.$watch('getAlbumId', function(album){
     currentAlbum = Fixtures.getAlbum();
    });

这就是所谓的javascript防弹技术，因为无论出于何种原因它都不起作用，而且您也无法知道为什么

在向右设置div动画然后动态添加新的div时出现问题

1 个答案: