Почему мой сценарий jQuery производит двойной fadeIn? - PullRequest
Новая
       16

Почему мой сценарий jQuery производит двойной fadeIn?

3 голосов
/ 26 августа 2010

Я пытаюсь использовать .fadeIn (), чтобы мои навигационные эффекты при наведении выглядели более плавными при переходе.За исключением того, что я получаю то, что могу описать только как двойное затухание (и обратно, и обратно).

Я новичок в JS и jQuery API, поэтому любая помощь приветствуется.Я старый профессионал с CSS, так что я все еще думаю в этих терминах.На этом я добавляю класс для переключения фонового спрайта bg-position вниз.Проблема с моим jQuery, моим CSS или обоими?

http://tuscaroratackle.com - это рассматриваемый экземпляр - навигационные ссылки.

Ответы [ 2 ]

7 голосов
/ 26 августа 2010

Вместо mouseout и mouseover, которые запускают даже при вводе дочернего элемента , вы можете использовать .hover(), например: 

$("#nav li").hover(function(){
  $(this).find("a").addClass("hover").fadeIn();
}, function(){
  $(this).find("a").removeClass("hover").fadeOut();
});

.hover() отображается на события mouseenter и mouseleave, которые не срабатывают при входе / выходе из детей, что и вызывает двойную анимацию в вашем текущем коде.

Не имеет прямого отношения к вопросу, но есть некоторые другие проблемы на странице, к которой вы хотите обратиться, включен jQuery (последний 1.4.x), а затем jQuery 1.2.6версия 1.5.1 плагина проверки (, который до 1.7 сейчас ).Я бы посмотрел на обновление вашего плагина проверки и удаление jQuery 1.2.6, так как это может вызвать головную боль позже (и более тяжелую страницу для пользователей сейчас).

1 голос
/ 26 августа 2010

вы можете сделать это так, 

$("#nav li").hover(function(){    
    $(this).find("a").fadeIn();
},
function(){
    $(this).find("a").fadeOut();
}).find("a").addClass("hover").hide();

Я скрываю a на изображении, оно будет отображаться при наведении.

вы также можете установить display:none для hover класса, чтобы вам не приходилось звонить туда .hide().

вот демо

...