Question

-2

Jquery Stop Fadein / Fadeout

rated 0 times [ 5] [ 7] / answers: 1 / hits: 41535 / 14 Years ago, mon, may 10, 2010, 12:00:00

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

  }

)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 14 Years ago brennonr · Accepted Answer

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

  }

)