Бесконечные циклы затухания с эффектом ролловера изображений jQuery

Question

Я намеревался заменить изображения приятным эффектом затухания: у меня есть одно изображение A в качестве фона.при наведении мыши, изображение B исчезает.при наведении мыши изображение B исчезает, и мы снова видим изображение A.Я использую этот код:

<script type='text/javascript'>
    $(function() {
            $("img.fade")
                .mouseover(function() { 
                $(this).fadeOut(2000);                          
                })
                .mouseout(function() {
                $(this).fadeIn(2000);                                   
                });
    });     
</script>

, но проблема заключается в , что, когда пользователь остается при наведении, он продолжает цикл (fadeIn, fadeOut, fadeIn, fadeOut ..)Я хочу, чтобы, когда финишное окончание закончилось, оно сохранилось.когда пользователь щелкает мышью, просто тогда я хочу, чтобы произошло новое затухание.Спасибо!

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

<script type='text/javascript'>
$(function() {

  $('img.fade').hover(function() {
    var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    var src = $(this).attr("src").replace("_over", "");
    $(this)
      .animate({opacity:0},0)
      .attr('src',src)
      .stop()
      .animate({opacity:1},500);
  });
});
</script>

Answer 1

Для других, которые также приводят здесь

Google+(Ignorance||rum) = me. 

mouseenter + mouseleave, может помочь с странным полупериодическим поведением, которое, как вы думали, могло бы работать, например,

var someElements = $('div.event-cell');

            someElements.mouseenter(function () {
                var targets= calEvents.not(this);
                targets.fadeTo(1000, 0.3);
            }).mouseleave(function () {
                var targets = someElements.not(this);
                targets.fadeTo(1000, 1);
            });

Кажется, что при наведении курсора и наведении мышки большевключительно, чем вы думаете, например, mouseout включает в себя дочерние элементы.

I think = layman's opinion after rum :)

См. Демонстрационный раздел http://api.jquery.com/mouseover/

Answer 2

Если вы не хотите динамически переключать изображение, а ДЕЙСТВИТЕЛЬНО хотите продолжать использовать фоновое изображение, вы можете воспользоваться всплывающими событиями ...

HTML

<div class="myClass" style="background: url(imageA.jpg);">
    <img src="imageB.jpg" />
</div>

jQuery :

$('.myClass').hover(function(){
    $(this).find('img').fadeOut(2000);
}, function(){
    $(this).find('img').fadeIn(2000);
})

Не проверено, поэтому дайте нам знать, работает ли оно или нет.

Answer 3

Мне кажется, что изображение исчезает, как только оно исчезает, что вызывает функцию отключения мыши. Попробуйте анимировать до 0,01 непрозрачности.

Answer 4

$(function() {
  var img = ['imageA.jpg','imageB.jpg'] 
  $('img.fade').hover(function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[1])
      .stop()
      .animate({opacity:1},1000);
  }, function() {
    $(this)
      .animate({opacity:0},0)
      .attr('src',img[0])
      .stop()
      .animate({opacity:1},1000);
  });
});

Вы можете попробовать здесь

Ссылка : . Hover () , .stop ()

Answer 5

Попробуйте этот код:

 $(function() {
        $("img.fade")
            .mouseover(function() { 
            $(this).fadeTo('2000', 0);                          
            })
            .mouseout(function() {
            $(this).fadeTo(2000, 1);                                   
            });
});  ​

Проблема в том, что функция fadeOut () устанавливает свойство display вашего элемента в none, поэтому DOM считает, что ваша мышь больше не взаимодействует с элементоми вызывает функцию fadeIn ().Это постоянно.Функция fadeTo изменяет непрозрачность, но фактически не заставляет изображение идти своим путем.Требуется два параметра, длительность и непрозрачность.