Jquery Stop Fadein / Fadeout

Question

Это довольно легко, но я не могу понять это.

По сути, у меня есть jquery hover, который исчезает в div и исчезает при наведении курсора на другой.

Когда я быстро включаю и выключаю несколько раз, он пульсирует взад и вперед в течение 3-4 секунд, чтобы завершить все эти постепенное исчезновение / исчезновение.

Я обычно прекращаю эти вещи с помощью .stop (), но, похоже, это не помогает. Как я могу убить постепенное исчезновение, если я наведите курсор мыши на кнопку перед указателем $ (". TxtWrap"). Stop (). Hover (

$(".txtWrap").stop().hover(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)

Answer 1

Ваш stop() неуместен.

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

$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().fadeOut();
    $(this).find('.txtDesc').fadeIn();
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').stop().fadeOut();
  }
)

---

EDIT:

Это оживит непрозрачность элементов, не скрывая элемент. Если вы хотите, чтобы они были скрыты, используйте .hide(), вам нужно добавить обратный вызов для функции animate.

$(".txtWrap").hover(
  function () {
    $(this).find('.txtBock').stop().animate({opacity:0}, 500);
    $(this).find('.txtDesc').animate({opacity:1}, 500);
  //  $('#timeTxt').fadeOut();
  //  $('#timeTxtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').animate({opacity:1}, 500);
    $(this).find('.txtDesc').stop().animate({opacity:0}, 500);
  }
)

Answer 2

Думаю, что я опубликую это, потому что ни один из этих ответов не работает для меня.

* Истинные параметры сообщают остановке, чтобы очистить очередь и перейти к концу анимации

$(".txtWrap").stop().hover(
  function () {
    $(this).find('.txtBock').stop(true, true).fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').stop(true, true).fadeOut();
  }
)

Ссылка: http://forum.jquery.com/topic/jquery-hover-events-cant-keep-up-with-fadein-and-fadeout-events-queue

Answer 3

В такие моменты я обращаюсь к гению Брайана Черна .hoverIntent() плагин - Это довольно гладко ... ждет, пока пользователь не замедлится достаточно, прежде чем выполнить. Вы можете настроить его под свои нужды.

Просто включите плагин (он достаточно короткий, я иногда помещу его прямо в файл скрипта), затем добавьте слово Intent:

$(".txtWrap").hoverIntent(
  function () {
    $(this).find('.txtBock').fadeOut();
    $(this).find('.txtDesc').fadeIn();

  },
  function () {
    $(this).find('.txtBock').fadeIn();
    $(this).find('.txtDesc').fadeOut();
  }
)

Answer 4

Если у вас есть эта вещь:

$("#frase1").fadeIn(5000, function(){
   $("#frase2").fadeIn(10000, function(){
      $("#frase3").fadeIn(15000, function(){

      });
  });
});

хорошо, вы должны использовать эту инструкцию для сброса fadeIn или другого события в очереди:

$("#frase1").stop(false,true, true);
$("#frase2").stop(false,true, true);
$("#frase3").stop(false,true, true);

Answer 5

Я собирался опубликовать аналогичный вопрос, когда поисковая система Superintelligent SO выделила этот вопрос для меня, поэтому я решил опубликовать свое собственное решение для потомков.

Я взял решение user113716 и уточнил егонемного.В моем случае div, который я скрывал и показывал, начинался как display:none, поэтому мне пришлось добавить opacity:0 в CSS и сказать jQuery установить .css({display:block}) до того, как он начал анимировать прозрачность до 1, чтобы исчезнуть.in.

При исчезновении это мне не понадобилось, но я добавил обратный вызов к .hide() div после анимации непрозрачности до нуля.

Вот скрипка, иллюстрирующая, чтоЯ закончил с:

http://jsfiddle.net/mblase75/wx2MJ/

Соответствующий JavaScript:

$('li').mouseover(function() {
    $(this).addClass('hover');
    $('#' + $(this).data('divid')).stop().css({
        display: 'block'
    }).animate({
        opacity: 1
    }, 500);
});

$('li').mouseout(function() {
    $(this).removeClass('hover');
    $('#' + $(this).data('divid')).stop().animate({
        opacity: 0
    }, 500, function() {
        $(this).hide();
    });
});