javascript - 在 jQuery 代码中将 clearQueue 放在哪里

Question

我有以下代码:

      $("#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>

Answer 1

我认为您正在寻找 stop(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