Не могу закончить исчезновение jQuery при наведении мыши

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

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

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

testsite00.hostoi.com

Я не могу понять, как заставить затухание заканчиваться при наведении мыши. Я пытаюсь создать плавное исчезновение между ссылками, но исчезновение повторяется при наведении курсора мыши. Я пробовал несколько комбинаций .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>

jquery mousehover jquery-hover
person dcd0181    schedule 17.06.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Передайте 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 (сделайте его невидимым), измените большое изображение на изображение, представленное миниатюрой, затем нарастание большого изображения. Скорость нарастания в настоящее время установлена ​​на «нормальную», но это может быть «медленно», «быстро» или какое-то миллисекундное значение, если вы хотите поэкспериментировать с ним. Исчезла функция наведения, поскольку вам не нужно какое-либо поведение при выходе из мыши.

person kinakuta    schedule 17.06.2011
comment
Спасибо, я только что обновил свой комментарий тем, что, как я думаю, вы имеете в виду. Кажется, это не сработало :( - person dcd0181; 17.06.2011
comment
Спасибо, сэр, это было более чем полезно, я все еще новичок, когда дело доходит до java-script и jQuery. $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')) на самом деле изображения, в которых я хочу исчезнуть, я должен разместить ваш код здесь вместо этого? Спасибо еще раз. - person dcd0181; 17.06.2011
comment
Вот код, который я использую designchemical.com /блог/index.php/jquery/. URL-адрес изображения, который необходимо затемнить, получается путем получения URL-адреса миниатюры и удаления «/thumb». Что я сделал, так это сделал разные изображения миниатюры и сохранил их в том же каталоге, что и основные изображения. - person dcd0181; 17.06.2011
comment
Хорошо, я понимаю, что вызвало путаницу - они без необходимости использовали наведение, когда все, что им было нужно, это ввод с помощью мыши. Правильно ли я понимаю, что вы хотите сделать то же самое, но просто поставить на миниатюру затухание, которое исчезает, когда вы перестаете наводить курсор на миниатюру? - person kinakuta; 17.06.2011
comment
Да, в основном у меня есть 4 больших пальца и 4 больших изображения. Большие изображения должны исчезать при наведении соответствующего большого пальца. Появление в порядке, когда ссылка наведена, но когда я выхожу из ссылки, исчезновение повторяется, что приводит к двойному эффекту, что не имеет большого значения, но выглядело бы лучше, если бы было только постепенное появление. лол, это имеет какой-то смысл ? Я снова загружу тестовый сайт. - person dcd0181; 17.06.2011
comment
Хорошо, сайт обновлен [ссылка] http://.testsite00.hostoi.com Ссылки слева - это мои превью, а синие прямоугольники справа - это большие, или main-img - person dcd0181; 17.06.2011
comment
Хорошо, это начинает иметь больше смысла - когда вы вводите мышь на миниатюру, исчезает большое изображение. Когда вы выходите из мыши, что именно должно произойти? Должна ли исчезнуть большая картинка, которую вы рисуете? Должен ли он просто оставаться там, как в примере, который вы показали? - person kinakuta; 17.06.2011
comment
Lol, когда мышь уходит, исчезновение повторяется, я пытаюсь заставить его прекратить повторяться, чтобы оно просто оставалось там без дополнительного исчезновения, когда мышь уходит, еще раз спасибо за вашу помощь! - person dcd0181; 17.06.2011
comment
Хорошо, я думаю, что я получил это сейчас. Я отредактирую свой код выше, и вы попробуете его, чтобы увидеть, делает ли он то, что вы хотите. - person kinakuta; 17.06.2011
comment
Исправление, вы были правы, большое изображение должно закончить исчезать и не исчезать снова, когда мышь уходит. - person dcd0181; 17.06.2011
comment
Вау, ок, спасибо! Я попробовал быстрое и грязное копирование/вставку, лол.. вообще не сработало, так что мне придется поиграть с этим сегодня вечером, надеюсь, это просто CSS, и это сработает! Я обязательно процитирую ваш код, если/когда страница заработает. - person dcd0181; 17.06.2011
comment
Нет, не надо цитировать. Это должно работать, я поместил это в код примера сайта, на который вы ссылались, и это сработало. Однако я думаю, что будет лучше, если вы больше замедлите затухание, поэтому вы можете изменить обычное на медленное или поэкспериментировать. - person kinakuta; 17.06.2011

arrow_upward
0
arrow_downward

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

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

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

person SpliFF    schedule 17.06.2011