CODEWITHSUNDEEP
javascriptjqueryeffects
Odyss3us
Odyss3us

Reputation: 6635

jQuery toggle button opacity

I am trying to toggle two buttons's opacity when the user hovers over the containing div, and when they mouse out it should go back to being hidden, at the moment it is doing that but as soon as I try to click on one of the buttons, it goes mad and starts toggling the opacity on and off repeatedly, here is my code,

Javascript/jQuery:

    $('#container').live({
      mouseover: function() {
          $('.button').fadeToggle();
      },
      mouseout: function() {
          $('.button').fadeToggle();
      }
    });

HTML: 

            <div id="container">
                <div class="button"></div>
                <div></div>
                <div class="button"></div>
            </div>

Thanx in advance!

PS: Sorry about the title, I forgot to change it, as it is showing and hiding the buttons with a fade effect and not toggling the opacity.

Upvotes: 1

Views: 1593

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

.stop() your animation before running it again.

$('#container').live({
  mouseover: function() {
      $('.button').stop();
      $('.button').fadeToggle();
  },
  mouseout: function() {
      $('.button').stop();
      $('.button').fadeToggle();
  }
});

Upvotes: 2

SLaks
SLaks

Reputation: 887757

The mouseover and mouseout events bubble, meaning that they will also fire for all of the element's children.

You should handle mouseenter and mouseleave, which do not bubble.

Upvotes: 2

Related Questions