jQuery切換按鈕不透明度

Question

當用戶將鼠標懸停在包含的div上時，我試圖切換兩個按鈕的不透明度，當它們鼠標移出時，它應該回到隱藏狀態，此時它正在這樣做但是一旦我嘗試單擊其中一個按鈕它瘋了，開始反復打開和關閉不透明度，這是我的代碼，

使用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提前！

PS：對於標題感到抱歉，我忘了更改它，因為它顯示並隱藏了具有淡入淡出效果的按鈕而沒有切換不透明度。

Answer 1

mouseover和mouseout事件會冒泡，這意味着它們也將觸發所有元素的子項。

你應該處理不會冒泡的mouseenter和mouseleave 。

Answer 2

.stop（）你的動畫再次運行之前。

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