Ссылки не активны, пока не закончится эффект

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> фиксированные размеры.