Где поставить clearQueue в коде jQuery - PullRequest
Новая
       7

Где поставить clearQueue в коде jQuery

2 голосов
/ 20 февраля 2012

У меня есть следующий код: 

      $("#myDiv").hover(
          function () {
            $(this).clearQueue().animate({
                backgroundColor: "#d7df23",
                opacity: 0.95
            }, 250).find(".thumb").clearQueue().animate({
                backgroundColor: "#FFF"
            }, 250).attr('src','myIMG.jpg');
            $(this).next("div").clearQueue().fadeIn(150); // THIS MAY BE WHERE THE PROBLEM IS...
          }, 
          function () {
            $(this).clearQueue().animate({
                backgroundColor: "#222",
                opacity: 0.90
            }, 250).find(".thumb").clearQueue().animate({
                backgroundColor: "#000"
            }, 250).attr('src','myIMGup.jpg');
            $(this).next("div").clearQueue().fadeOut(500); // THIS ALSO MAY BE WHERE THE PROBLEM IS...
          }
    );

Первая часть функции наведения работает нормально, но как только мне нужно что-то сделать со следующим div, у меня возникают проблемы.Приведенный выше код работает, если вы дождетесь завершения анимации, прежде чем перемещать мышь туда-сюда, но если вы наведите курсор мыши до того, как анимация закончится при наведении курсора, следующий div исчезнет, ​​и я не смог его отобразить вообще.

Есть идеи?Я думаю, что это может иметь какое-то отношение ко всем имеющимся у меня clearQueue ...

РЕДАКТИРОВАТЬ:

Пример HTML: 

   <div class="container">
                    <div id="myDiv">
                        <img src="myIMGup.jpg" class="thumb" />
                        <h2>The Header</h2>
                    </div>

                    <div>
                            <h3>Popup Header...</h3>
                            <p>Blah Blah Blah...</p>
                    </div>
    </div>

1 Ответ

1 голос
/ 20 февраля 2012

Я думаю, вы ищете стоп (true, true) или stop (true, false) в зависимости от того, хотите ли вы, чтобы ваша анимация была плавной или нет ...

ссылка: http://api.jquery.com/stop/

надеюсь, это поможет -ck

НОВЫЙ ОТВЕТ: используйте это, чтобы скрыть: 

$(this).next("div").stop(true).animate({opacity:0});

и это показать: 

$(this).next("div").stop(true).animate({opacity:1});

вместо fadeIn () и fadeOut ()

jQuery запоминает начало, в котором находится непрозрачность, когда вы используете fadeIn / fadeOut, и, поскольку вы по существу останавливаете анимацию, вы «заклиниваете» fadeIn / fadeOut, чтобы перейти к остановленной непрозрачности

надеюсь, это поможет -ck

ОТВЕТ НА МОРА !! 1! :

, если вам также нужно фактическое "скрытие", например .display установлено на 'none'

используйте это так: 

$(this).next("div").stop(true).show().animate({opacity:1});

и 

$(this).next("div").stop(true).animate({opacity:0}, function() { $(this).hide() });

если бы я делал это, я бы обернул это так: 

$.fn.myFade = function(fadeIn) {
  return this
    .stop(true)
    .show()
    .fadeTo('fast', +!!fadeIn, function() { !fadeIn && $(this).hide(); });
};

$(this).next("div").myFade(true); // show
$(this).next("div").myFade(false); // hide

Полностью функционирующее демонстрационное действие Активировать: http://jsbin.com/isumiw

надеюсь, что это поможет LOL -ck

...