我将html字符串(var data ['return'])附加到ul元素$('#sidebar_append'),其格式如下
<li>item one</li>
<li>item two</li>
<li>item three</li>
我想为所有孩子创建一个连续的淡入淡出动画。我尝试了以下内容,但它不会淡出
$('#sidebar_append')
.hide()
.append(data['return'])
.children()
.each(function() {
$(this).fadeIn('fast')
});
这很奇怪,因为当我执行 console.log($(this))时,我实际上在firebug中获得li
但没有fadeIn
。
答案 0 :(得分:1)
没关系,这很简单,我忘了$('#sidebar_append')
仍然是隐藏的。您还需要延迟来创建序列动画:
$('#sidebar_append')
.append(data['return'])
.children().hide()
.each(function(index) {
$(this).delay(150*index).fadeIn('slow')
});
答案 1 :(得分:1)
试试这个
(function(){
$('#sidebar_append').append(data['return']).children().hide();
var index=0;
function show()
{
$('#sidebar_append li').eq(index).fadeIn('slow', function(){
index+=1;
if($('#sidebar_append li').eq(index).length) show();
else return false;
});
}
show();
})();
答案 2 :(得分:0)
与该插件jquery-timing一起,整个事情变得更短:
$('#sidebar_append').append(data['return'])
.children().hide().each($).fadeIn('fast',$);
瞧