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会消失，我无法让它显示出来。< / p>

有什么想法吗？我认为这可能与我所有的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

我认为您正在寻找停止（真实，真实）或停止（真实，虚假），具体取决于您是否希望动画流畅......

参考： http://api.jquery.com/stop/

希望这有助于确认

新答案： 用这个隐藏：

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

并显示：

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

而不是fadeIn（）和fadeOut（）

jQuery记得你使用fadeIn / fadeOut时不透明度的开始，因为你正在停止动画，你正在“干扰”fadeIn / fadeOut以转到停止的不透明度

希望这有助于确认

MOAR ANSWER !! 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

在jQuery代码中放置clearQueue的位置

1 个答案: