jquery fade使用子對象切換？

我只是試圖爲我的投資組合創建一個enterpage。一切看起來不錯，但我的jQuery代碼將無法正常工作。jquery fade使用子對象切換？

我想在屏幕中間的一個圓圈上徘徊時，用內容「音樂」和「網頁設計」淡入淡出2個框。 div.hidden元素是IN Circle元素。

現在，當我將鼠標懸停在圓上時，它會消失，當我離開圓環時，它會消失。問題：當我將光標移動到一個新的「隱藏」框中時，它們會因爲我離開了圓形元素而淡出？

你能幫我解決這個問題嗎？這裏是我的代碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     console.log('DOM READY'); 

     $('#me').mouseover(function() { 
     $('.hidden').fadeIn(1000); 
     }); 

     $('#me').mouseout(function() { 
     $('.hidden').fadeOut(1000); 
     }); 

    }); 
</script>

HTML：

<!DOCTYPE HTML>  
<html> 
    <head> 
     <title>DominikBiedebach - Web- und Printdesigner</title> 
     <style type="text/css"> 
     @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,700); 

     html, body { background: #f4f4f4; color: #202020; } 
     div#me{ 
      background: url(images/me.png) no-repeat; 
      height: 256px; 
      width: 256px; 
      margin: 40px auto 10px auto; 
      position: relative; 
     } 
     div#container{ 
      width: 960px; 
      margin: 0px auto; 
      text-align: center; 
     } 
     h1 { 
      font-size: 100px; 
      font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; 
      margin: 0px; 
     } 
     h3 { 
      font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
      font-size: 30px; 
      line-height: 26px; 
      text-transform: uppercase; 
     } 

     .hidden { display: none; } 
     #music { 
      position: absolute; 
      left: -200px; 
      width: 200px; 
      height: 400px; 
     } 

     </style> 
    </head> 
    <body> 
     <div id="container"> 
     <div id="me"> 
      <div class="hidden" id="music">Testbox</div> 
      <div class="hidden" id="webdesign">Testbox</div> 
     </div> 

     <h1>xxxx</h1> 
     <h3>xxxx</h3> 
     </div> 
    </body> 
</html>

來源

2012-10-29 vcs

你可以嘗試用mouseenter/mouseleave更換mouseover/mouseout或使用hover方法：

$('#me').hover(function() { 
    $('.hidden', this).fadeToggle(1000); 
});

來源

2012-10-29 00:17:51 undefined

謝謝，我會努力比給你的反饋。我是jQuery新手，所以我必須閱讀更多關於事件和選擇器的內容。 :) – vcs

謝謝，mouseenter和mouseleave幫助了我很多！ – vcs

jquery fade使用子對象切換？

回答

相關問題