Каков наилучший способ сделать эффект наведения мыши с эффектом наведения мышью на JavaScript?

Question

Я бы предположил, что jQuery будет библиотекой, используемой для этого. Я, конечно, могу понять, как переключать источник изображения при наведении мыши, а затем снова включать его при наведении мыши. Но как я могу добиться этого эффекта с постепенным исчезновением изображений?

Я уже пытался добиться этого, используя плагин jQuery Cycle, и мне это не удалось. Я чувствую, может быть, есть более простой способ сделать это. Буду признателен за помощь, есть мысли?

Answer 1

Поместите изображение в DIV и установите фон DIV на первое изображение.Поместите тег изображения в DIV и наведите SRC на второе изображение.

Теперь вы можете поиграть с непрозрачностью IMG, обнажив фоновое изображение позади него, не меняя ничего.

используйте .opacity ()

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

<div class="wrapper">
   <img src="..." />
</div>

Answer 2

CSS3 добавляет несколько свойств перехода для обработки подобных вещей, но на данный момент, если вы настроены на использование jQuery, вы можете использовать функцию .animate в сочетании с mouseenter и mouseleave.

Пример:

$('img')
    .mouseenter(function() {
        $(this).stop(true,true).animate({ opacity: 0.5 }, 2000);
    });
    .mouseleave(function() {
        $(this).stop(true,true).animate({ opacity: 1 }, 2000);
    });

.stop очистит предыдущую анимацию и завершит ее так, что, если пользователь будет быстро наводить курсор на элемент несколько раз, он не позволит анимациям накапливаться в длинной очереди.

Answer 3

Вы можете попробовать это

$(function(){
  $("imageSelector).mouseover(function(){
      $(this).data("oldSrc", this.src).attr("src", "newSource").stop().fadeT0(500, 1);
  }).mouseout(function(){
     $(this).attr("src", $(this).data("oldSrc")).stop().fadeTo(500, 0.5);
  });
});