我希望我的<li>
在从Ajax加载加载时能够动画化。下面是我的代码,它可以处理循环,但是它可以保存所有<li>
的加载。
如何在加载时将每个动画分别动画化?
success: function( json_data )
{
for( var i = 0; i < json_data.length; i++ )
{
// if user has no image sets default
if(json_data[i].author=="")
json_data[i].author ='http://lorempixel.com/250/250/';
console.log("jsonData: " , json_data[i]);
var rainingPhrase = $(".timeline-normal");
var tl = new TimelineLite();
var new_html = [
'<li class="timeline-normal" id="' + json_data[i].date +'"">',
'<div class="timeline-badge" style="background-image: url(' + json_data[i].author +' )">',
'</div>',
'<div class="timeline-date">',
'<time datetime="' + json_data[i].date + '"></time>',
'</div>',
'<div class="timeline-panel">',
'<a href="json_data[i].url">',
'<div class="popover left">',
'<div class="arrow"></div>',
'<h3 class="popover-title">' + json_data[i].title + '</h3>',
'<div class="popover-content">',
'<p><small>' + json_data[i].description +'</small></p>',
'</div>',
'</div>',
'</a>',
'</div>',
'</li>'
].join( '\n' );
jQuery('.get_more_topics').before( new_html );
jQuery('.get_more_topics').before( more_button );
/// HERE ARE THE LINES I NEED HELP WITH
tl.add(TweenLite.set(rainingPhrase, {bottom: 250}));
tl.add(TweenLite.to(rainingPhrase, 2, {bottom:5, ease: Bounce.easeOut}));
jQuery('#temp_loader').remove();
jQuery('.get_more_topics').show();
}
}
发布于 2015-04-13 05:51:57
我想你有三个问题:
TimelineLite
实例在循环中创建,rainingPhrase
变量也在循环中收集元素。正在进行中的循环。TimelineLite
变量,每个实例都接收到列表项的ALL。TimelineLite
实例是立即动画的LIs的所有,因为默认情况下,它们都添加到0-位置。(我建议你去了解位置参数看看这个)。解决办法或许可以是:
tl
变量放在循环之外,这样您就有了一个时间线而不是多个时间线。对rainingPhrase
变量也做同样的操作。将这两个放在循环之后。{paused: true}
添加到时间线的构造函数中,以便在添加所有内容(即var tl=new TimelineLite({paused: true});
)时保持暂停。add
方法不同,我建议您使用staggerFromTo
方法,因为您希望为每个列表项设置一个初始状态,并且希望它们将您的tweens放在后面或重叠一点。所以代码变成:tl.staggerFromTo(rainingPhrase, 2, {bottom: 250}, {bottom: 5, ease: Bounce.easeOut}, .2);
。这个.2是参差值。你看这里。tl.play();
。尽管如此,您可能甚至不需要使用TimelineLite
。您可以使用TweenMax
并实现相同的目标。例如,看看这个JSFiddle。
https://stackoverflow.com/questions/29246214
复制相似问题