jquery停止淡入淡出/淡出 [英] Jquery Stop Fadein / Fadeout

问题描述

基本上我有一个jquery悬停，淡入淡出，淡入淡出。

这是一个相当容易的，但我似乎无法弄清楚。悬停时。

当我快速徘徊和关闭几次时，它会来回跳动约3-4秒，以完成所有淡入/淡出。

我通常使用.stop（）来阻止这些事情，但它似乎并没有做到这一点。 stop（）。hover（

）

 
 
 
 code> $（ txtWrap。）停止（）悬停（
功能（）{
 $（本）.find（ 'txtBock。'）淡出（）; 
 $（this）.find（'。txtDesc'）。fadeIn（）; 
 
}，
 function（）{
 $（this）.find（'。 txtBock '）淡入（）; 
 $（本）.find（' txtDesc'）淡出（）; 
} 
）
  

解决方案您的 stop（） p>

试试这个：

  $（。txtWrap）。hover（ 
函数（）{
 $（this）.find（'。txtBock'）。stop（）。fadeOut（）; 
 $（this）.find（'。txtDesc'）。 fadeIn（）; 
 // $（'＃timeTxt'）。fadeOut（）; 
 // $（'＃timeTxtDesc'）。fadeIn（）; 
 
}， 
 function（）{
 $（this）.find（'。txtBock'）。fadeIn（）; 
 $（this）.find（'。txtDesc'）。stop（）。 fadeOut（）; 
} 
）
  

---

编辑：

这将在不隐藏元素的情况下动画化元素的不透明度。如果你想隐藏它们，使用 .hide（），你需要给animate函数添加一个回调函数。

< pre $ $（。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 '）动画（{不透明度：1}。。，500）;
$（本）.find（'。txtDesc'）停止（）动画（{不透明度：0}， 500）;
}
）


This is a fairly easy one, but I cant seem to figure it out.

Basically I have a jquery hover that fades in a div and fades out the other upon hover.

When I quickly hover on and off a few times it pulses back and forth for about 3-4 seconds to finish all those fade in/fade outs.

I generally stop these things with .stop(), but it doesnt seem to do the trick here. How can I kill the fade in if I hover off the button before the an`$(".txtWrap").stop().hover(

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

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

解决方案

Your stop() is misplaced.

Try this:

$(".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:

This will animate the elements' opacity without hiding the element. If you want them hidden, use .hide() you'll need to add a callback to the animate function.

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

这篇关于jquery停止淡入淡出/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！