Jquery停止淡入/淡出

问题描述

这是一个相当简单的问题，但我似乎无法弄清楚.

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

基本上，我有一个 jquery 悬停，它在一个 div 中淡入并在悬停时淡出另一个.

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

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

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.

我通常用 .stop() 来停止这些事情，但它似乎在这里不起作用.如果我将鼠标悬停在 an`$(".txtWrap").stop().hover(

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

推荐答案

你的 stop() 放错地方了.

试试这个:

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

<小时>

这将在不隐藏元素的情况下为元素的不透明度设置动画.如果你想隐藏它们，使用 .hide() 你需要添加一个回调到 animate 函数.

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停止淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！