JQuery Stop Fadein/Fadeout

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

В принципе, у меня есть зависание jquery, которое исчезает в 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();
  }
)

Ответ 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(), вам нужно добавить обратный вызов к функции анимации.

$(".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);
  }
)

Ответ 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

Ответ 3

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

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

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

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

Ответ 4

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

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

В режиме угасания мне это не понадобилось, но я добавил ответ на .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();
    });
});

Ответ 5

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

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

      });
  });
});

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

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