我希望在显示(q2)的同时为链接(q2 ul li a)运行动画,q2将在页面加载时隐藏。
$('.q2').fadeIn(function(){
$('.q2 ul li a').animate({ borderSpacing : 1 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
$(this).css('-moz-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
$(this).css('transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
},
duration:1500 }, 'linear')
});
});
和css:
ul li a {
border-spacing: 0;
}
答案 0 :(得分:1)
在您的代码中,动画将在$('.q2')
可见之后执行,因为您将此动画放在fadeIn函数的回调中。也许它应该是这样的:
$('.q2').fadeIn(1500);
$('.q2 ul li a').animate({ borderSpacing : 1 }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
$(this).css('-moz-transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
$(this).css('transform','rotate('+(-1*200*now+200)+'deg) scale('+(now)+')');
},
duration:1500 },
'linear')
});