CODEWITHSUNDEEP
jquery
shin
shin

Reputation: 32721

jQuery animation plays over and over and changing opacity is too slow

There are more than 30 lists tags. When I hover over one of them, I want to keep the opacity of this li, and dim out or decrease opacity to 0.4.

I made following code. But I have two problmes.

  1. When I hover over it repeats again and again like a broken accordion.

How to fix this problem?

  1. Since I am changing opacity of all li, the list I am on changes opacity to 0.4 and then 1.

It is too slow. I don't want to change the opacity of list I am on.

Could anyone suggest a better code please.

Thanks in advance.

   $('ul .applications li').hover(
    function () {

    $('ul .applications li').animate({
    opacity: 0.4
  }, 800 );
    $(this).animate({
     opacity: 1
    } );


},
  function () {
      $('ul .applications li').animate({
     opacity: 1
    }, 500 );

  }



)

Upvotes: 0

Views: 137

Answers (1)

Nick Craver
Nick Craver

Reputation: 630429

Use .stop(true) to stop previous animations (and clear the queue), so they don't queue up like this:

$('ul .applications li').hover(function () {
  $('ul .applications li').stop(true).animate({ opacity: 0.4 }, 800 );
  $(this).stop(true).animate({ opacity: 1 });
}, function () {
  $('ul .applications li').stop(true).animate({ opacity: 1 }, 500 );
});

You can test it out here.

Upvotes: 1

Related Questions