jquery - 在过度效果完成之前，链接不活动

Question

我目前正在尝试为我的链接添加悬停淡入效果，并且我已经完成了，但是在效果发生时链接在几秒钟内没有激活。我已经尝试淡入链接内的 img 元素，但这不起作用。我将 .mouseover() 切换到 .hover() 仍然不起作用。

这是代码：

$(".tabButtons a").mouseover(function() {
 $(this).css("opacity","0");        
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButtonHover.png)");
$(this).animate({opacity: 1}, 500);       
});

$(".tabButtons a").mouseout(function() {
$(this).stop();
 $(this).css("opacity","1");
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButton.png)");
});

有什么建议么？？这是发生这种情况的页面：（中间有一排灰色的大按钮）

Answer 1

$(".tabButtons a").mouseenter(function() {
 $(this).css("opacity","0");        
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButtonHover.png)");
$(this).animate({opacity: 1}, 500);       
});

$(".tabButtons a").mouseleave(function() {
$(this).stop(true,true);
 $(this).css("opacity","1");
$(this).css("background","url(/testsite/assets/templates/tsi/images/sspButton.png)");
});

Answer 2

尝试在<span>标签内添加<a>标签并在标签上制作所有动画<span>。给你的<span>和<a>标签固定的尺寸。