Question

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

  }



)

Answer 1

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.