在jQuery代码中放置clearQueue的位置 [英] Where to put clearQueue in jQuery code

问题描述

我有以下代码：

  $（＃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）; //这可能是问题所在...... 
}，
 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）; //这也可能是问题所在...... 
} 
）; 
  

悬停功能的第一部分工作正常，但只要我需要做任何事情下一个div我遇到问题。如果您在移动鼠标之前等待动画完成，则上面的代码可以正常工作，但是如果您在动画完成之前鼠标移开，则下一个div会消失，我无法让它显示出来。

任何想法？我认为它可能与我所有的clearQueue有关......

编辑：

示例HTML：

 < div class =container> 
< div id =myDiv> 
< img src =myIMGup.jpgclass =thumb/> 
< h2>标题< / h2> 
< / div> 
 
< div> 
< h3> Popup Header ...< / h3> 
< p> Blah Blah Blah ...< / p> 
< / div> 
< / div> 
  

解决方案

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

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

希望这有助于确认

新答案：
使用此隐藏：

  $（this）.next（div）。stop（true）.animate（{opacity：0}）; 
  

这将显示：

<$ p $ 。p> $（本）的.next（ DIV）停止（真）.animate（{不透明度：1}）;


而不是fadeIn（）和fadeOut（）

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

希望这有助于确认

MOAR ANSWER !! 1！ ：

如果您还需要实际的隐藏，例如。 .display 设为'无'

使用它像这样：

  $（this）.next（div）。stop（true）.show（）。animate（ {不透明度：1}）; 
  

和

  $（this）.next（div）。stop（true）.animate（{opacity：0}，function（）{$（this）.hide（）}）; 
  

如果我这样做，我会很好地包装它：

  $。fn.myFade = function（fadeIn）{
返回此
 .stop（true）
 .show（ ）
 .fadeTo（'fast'，+ !! fadeIn，function（）{！fadeIn&& $（this）.hide（）;}）; 
}; 
 
 $（this）.next（div）。myFade（true）; // show 
 $（this）.next（div）。myFade（false）; //隐藏
  

完全运行的演示动作激活： http://jsbin.com/isumiw

希望这有助于lol -ck

I have the following code:

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

The first part of the hover function works fine, but as soon as I need to do anything with the next div I get problems. The code above works if you wait for the animations to complete before moving the mouse over and away, but if you mouseout before the animation is finished on hover the next div vanishes and I can't get it to appear at all.

Any ideas? I think it might have something to do with all the clearQueue's I have...

EDIT:

Example 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>

解决方案

i think you are looking for stop(true, true) or stop(true, false) depending on whether or not you want your animation to be fluid or not...

reference: http://api.jquery.com/stop/

hope this helps -ck

NEW ANSWER: use this to hide:

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

and this to show:

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

instead of fadeIn() and fadeOut()

jQuery remembers the start that the opacity is in when you use fadeIn/fadeOut and because you are halting the animation essentially you are "jamming" fadeIn/fadeOut to go to the stopped opacity

hope this helps -ck

MOAR ANSWER!!1! :

if you also need the actual "hide" eg. .display set to 'none'

use it like this:

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

and

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

if I were doing this I'd wrap it nicely like this:

$.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

Fully Functioning Demo Action Activate: http://jsbin.com/isumiw

hope THIS helps lol -ck

这篇关于在jQuery代码中放置clearQueue的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！