Question

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

制作新幻灯片
从“slotXX”

Futre步骤：

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

如果有人能让我朝着正确的方向前进，那么很多人都会感谢你。我不介意你是否只是指向一个几乎完全相同的教程，或者你想要分叉我的代码。

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

Answer 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);
});

希望有所帮助

随时告诉我，如果我错了

添加一个新对象然后设置动画

1 个答案: