Не может закончить исчезновение jQuery при мышлении - PullRequest
1 голос
/ 17 июня 2011

У меня есть простая настройка ссылок в стиле галереи с использованием смены изображения при наведении, которое я хочу исчезнуть. я в настоящее время используя `

.stop().hide().FadeTo("slow",1);` 

для исчезновения изображения, вызванного наведением на одну из ссылки слева, вот тестовый сайт, чтобы увидеть, о чем я говорю

testsite00.hostoi.com

Я не могу понять, как закончить постепенное исчезновение мыши. Я пытаюсь создать плавное затухание между ссылками, но затухание повторяется при наведении мыши. Iv'e попробовал несколько комбинаций .stop () и .hide (), но, похоже, не может остановить выполнение эффекта. Есть идеи? Заранее спасибо.

JQuery:

$(document).ready(function() {
// Image swap on hover
$("#gallery ul li img").hover(function(){   
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''))
  function() { //mouseenter handler 
        $(this).stop().fadeTo("slow",0.5);
  }
  function (){ //mouseleave handler 
        $(this).stop().fadeTo("slow",1.0);
    }
});

HTML:

<div id="gallery">
  <img src="images/gallery/home.png" alt="" id="main-img" />
   <ul>
     <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
     <li class="about"><img src="images/gallery/thumb/about us.png" alt="" /></li>
     <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
     <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
   </ul>
</div> 

Ответы [ 2 ]

1 голос
/ 17 июня 2011

Передайте true на ваш остановочный вызов, чтобы очистить анимацию, или true, true, чтобы очистить очередь и немедленно завершить анимацию:

.stop(true, true)

Кроме того, вы должны передать в обработчик наведения две функции - что происходит при вводе мыши, затем что происходит при отпускании мыши - если вы хотите, чтобы он снова появился (или исчез - независимо от желаемого поведения), он должен перейти во вторую функцию .

  $("#gallery ul li img").mouseenter(function(){
    var currentImg = $('#main-img').attr('src');
    var targetImg = $('this').attr('src').replace('thumb/', '');
    if (currentImg !== targetImg) {
      $('#main-img')
        .stop(true)
        .fadeTo(0,0)
        .attr('src', targetImg)
        .fadeTo('normal', 1);
    }
  });

Итак, для начала нужно проверить, не является ли изображение, на которое наведено изображение, уже не миниатюрой большого изображения - не нужно делать анимацию затухания здесь. Если это не так, остановите и очистите очередь анимации (чтобы предотвратить накапливание анимации при быстром зависании), мгновенно уменьшите текущее большое изображение до 0 непрозрачности (сделайте его невидимым), измените большое изображение на изображение, представленное миниатюрой, затем постепенное увеличение общей картинки. Скорость постепенного появления в настоящее время установлена ​​на «нормальную», но это может быть «медленная», «быстрая» или некоторая величина в миллисекундах, если вы хотите поэкспериментировать с ней. Gone - это функция парения, так как вам не нужно поведение при отпускании мышью.

0 голосов
/ 17 июня 2011

Не уверен, но вы можете столкнуться с распространенным заблуждением о том, что на самом деле делает mouseout.Из-за пузырей событие также запускается на дочерних элементах, что не совсем интуитивно понятно.

http://www.quirksmode.org/dom/events/mouseover.html

Попробуйте mouseleave и посмотрите, работает ли это.

...