追加一個新對象然後生成動畫

我在創建新幻燈片後無法啓動動畫。我正在試圖製作一個每隔20秒左右從xml數據更新的火車板。追加一個新對象然後生成動畫

創建新的幻燈片
動畫新的幻燈片在從上面的「slotXX」

Futre步驟：

變化div標記在更改z-index並刪除隱藏的舊幻燈片時刪除「a」

重複

如果任何人都可以把我在正確的方向千恩萬謝將接踵而至。我不介意，如果你只是指向我幾乎相同的教程，或者如果你想分叉我的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}}); 
}

來源

2014-09-22 horribly_n00bie

我不知道明白了一切，但似乎你想要的這種行爲：

（我叉筆）

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

希望它可以幫助

請隨時告訴我，如果我錯了

來源

2014-09-22 22:10:17 OxyDesign

這正是我想要的，謝謝。 – 2014-09-23 13:58:51

不客氣 – OxyDesign 2014-09-23 14:00:25

追加一個新對象然後生成動畫

回答

相關問題