Проблема с наведением jQuery

StackOverflow https://stackoverflow.com/questions/1797063

Вопрос

У меня есть такая HTML-структура:

<ul id="carousel" class="jcarousel-skin-photos">
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>

            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>              
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
        </ul>


        <a href="javascript:;" id="zoom">Yakınlaştır</a>

И небольшой фрагмент кода jQuery для эффекта постепенного появления/исчезновения:

    $('ul#carousel li a').hover(
  function() {
    $('a#zoom').fadeIn('fast');
  }, 
  function() {
    $('a#zoom').fadeOut('slow');
});

В конце я хочу показать a#zoom элемент при наведении ul#carousel li a элемент.Но есть странности в эффекте постепенного появления/затухания.

Это моя рабочая страница.Посмотреть его можно онлайн.

И как мне исправить эту странность?

Это было полезно?

Решение

Проблема возникает потому, что когда указатель мыши перемещается над значком масштабирования, он больше не учитывается над каруселью, поэтому срабатывает FadeOut.Когда затухание завершается, указатель мыши внезапно оказывается над каруселью, и затухание начинается снова.

Я предполагаю, что странное поведение — это мигание значка масштабирования.

Чтобы это исправить, вам нужно отменить затухание при наведении мыши на значок масштабирования, добавив обработчик событий наведения к самому значку масштабирования.

Другие советы

Я исправил эту странность с помощью этого кода:

$('a#zoom').mouseover(function() {
    $(this).stop();
});

Спасибо, Винсент.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top