附加一个新对象然后设置动画答案

【问题标题】：Append a new object then animate附加一个新对象然后设置动画
【发布时间】：2014-11-16 21:53:46
【问题描述】：

我在创建新幻灯片后无法启动动画。我正在尝试制作一个每 20 秒左右从 xml 数据更新一次的火车板。

创建新幻灯片
从“slotXX”上方动画化新幻灯片

后续步骤：

更改 div 标签删除“a”，同时更改 z-index 并删除隐藏的旧幻灯片
重复

如果有人能给我指明正确的方向，我会非常感谢。我不介意你只是给我指一个几乎相同的教程，或者你想分叉我的 codepen。

Codepen 网址：http://codepen.io/Spiderian/pen/HzLqJ

function nextSet() {

$( '#slot01' ).append( '<div id="slot01"><div id="rt01a"><h1 class="bullet">2</h1><div class="dir"><h2>XML Data</h2><h3 class="clear">Terminal</h3></div><div class="time"><h1>Y</h1><h2 class="min">min</h2></div></div></div>' );
$( '#slot02' ).append( '<div id="slot02"><div id="rt02a"><h1 class="bullet">3</h1><div class="dir"><h2>XML Data</h2><h3 class="clear">Terminal</h3></div><div class="time"><h1>Y</h1><h2 class="min">min</h2></div></div></div>' );
$( '#slot03' ).append( '<div id="slot03"><div id="rt03a"><h1 class="bullet">4</h1><div class="dir"><h2>XML Data</h2><h3 class="clear">Terminal</h3></div><div class="time"><h1>Y</h1><h2 class="min">min</h2></div></div></div>' );
$( '#slot04' ).append( '<div id="slot04"><div id="rt04a"><h1 class="bullet">5</h1><div class="dir"><h2>XML Data</h2><h3 class="clear">Terminal</h3></div><div class="time"><h1>Y</h1><h2 class="min">min</h2></div></div></div>' );
}

$(document).ready(function () {
window.setTimeout(nextSet, 2000);
});

function slider() {
var rt01a = document.getElementById('rt01a');
var rt02a = document.getElementById('rt02a');
var rt03a = document.getElementById('rt03a');
var rt04a = document.getElementById('rt04a');

TweenMax.from(
    [rt01a, rt02a, rt03a, rt04a],5, {css: {top: -80}});
}

【问题讨论】：

标签： javascript animation append gsap

【解决方案1】：

我不确定是否了解所有内容，但您似乎想要这种行为：

http://codepen.io/OxyDesign/pen/LuJrz

（我叉了你的笔）

HTML：

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <h1>Real Time Arrivals</h1>
    <ul class="live01">
        <li>
            <span class="container">
                <span class="bullet">0</span>
                <span class="dir">
                    <span class="data">XML Data</span>
                    <span class="clear">Terminal</span>
                </span>
                <span class="number">0</span>
                <span class="min">min</span>
            </span>
        </li>
        <li>
            <span class="container">
                <span class="bullet">0</span>
                <span class="dir">
                    <span class="data">XML Data</span>
                    <span class="clear">Terminal</span>
                </span>
                <span class="number">0</span>
                <span class="min">min</span>
            </span>
        </li>
        <li>
            <span class="container">
                <span class="bullet">0</span>
                <span class="dir">
                    <span class="data">XML Data</span>
                    <span class="clear">Terminal</span>
                </span>
                <span class="number">0</span>
                <span class="min">min</span>
            </span>
        </li>
        <li>
            <span class="container">
                <span class="bullet">0</span>
                <span class="dir">
                    <span class="data">XML Data</span>
                    <span class="clear">Terminal</span>
                </span>
                <span class="number">0</span>
                <span class="min">min</span>
            </span>
        </li>
    </ul>
</body>

</html>

CSS：

*{
    margin:0;
    padding:0;
}

body {
    display: block;
    position: relative;
    width: 432px;
    height: 428px;
    margin: 0px auto;
}

.live01 {
    border-top:15px solid #7e369c;
    background: #ededed;
    display:block;
    list-style:none;
    padding:0 10px;
}

.live01 li{
    border-bottom:2px solid #525257;
    display:block;
    height: 80px;
    overflow: hidden;
    position:relative;
}

.container{
    display:block;
    position:absolute;
    background: #ededed;
    color:#525257;
    padding-top:10px;
    top:0;
}
.bullet{
    display:block;
    float:left;
    width:50px;
    margin-left:5px;
    font-size:46px;
}
.dir{
    display:block;
    float:left;
    width:247px;
    margin-left:5px;
}
.dir .data{
    display:block;
    font-size:28px;
}
.dir .clear{
    display:block;
    font-size:16px;
}
.number{
    display:block;
    float:left;
    width:50px;
    margin-left:5px;
    font-size:34px;

}
.min{
    display:block;
    float:left;
    width:50px;
    font-size:28px;
}

JS：

var values = [{
    bullet: 2,
    data: 'XML Data 2',
    terminal: 'Terminal 2',
    number: 2
}, {
    bullet: 3,
    data: 'XML Data 3',
    terminal: 'Terminal 3',
    number: 3
}, {
    bullet: 4,
    data: 'XML Data 4',
    terminal: 'Terminal 4',
    number: 4
}, {
    bullet: 5,
    data: 'XML Data 5',
    terminal: 'Terminal 5',
    number: 5
}];

var listItems = $('.live01 li');
var containers, oldContainers;

function nextSet() {
    var listItemsLgth = listItems.length;

    oldContainers = $('.container');
    containers = $();

    for(var i = 0; i < listItemsLgth; i++){
        var datas = values[i],
        content = $('<span class="container"><span class="bullet">'+datas.bullet+'</span><span class="dir"><span class="data">'+datas.data+'</span><span class="clear">'+datas.terminal+'</span></span><span class="number">'+datas.number+'</span><span class="min">min</span></span>');

        containers = containers.add(content);
        listItems.eq(i).append(content);
    }

    slider();
}

function slider() {
    TweenMax.from(containers,2, {y: -80,onComplete:callback});
}

function callback() {
    oldContainers.remove();
}

$(document).ready(function () {
    window.setInterval(nextSet, 5000);
});

希望对你有帮助

如果我错了，请随时告诉我

【讨论】：