在jQuery中与其父级一起运行回调函数

Posted 2023-05-08

【中文标题】在jQuery中与其父级一起运行回调函数

【英文标题】：run callback function with its parent in jquery

【发布时间】：2013-05-30 11:07:48

【问题描述】：

我想在显示 (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;

【问题讨论】：

请解释什么在这里不起作用？如果你能在 jsfiddle 中加入同样的内容，那就太好了。

这里没有任何错误。但是因为 .q2 是 display: none 一开始我必须为它编写 show() 或 fadeIn() 函数，所以链接将显示没有任何动画。

【参考方案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')
);