2010-12-03 14 views
2

我有一個HTML結構像JQuery的淡出操作

<ul> 
<li> <span class="vcard"> 
      <a class="underline user-link" href="https://stackoverflow.com/users/aruna">Aruna </a> 
     </span> 
     <div style="display: none;" class="image_hover"> 
      Student 
      <p> 
      <a onclick="" href="#">Show additional details</a> 
      <a href="#">view</a> 
      <p>Employee ID : </p> 
      <p>Project Name: </p> 
      <p>Project Role : r</p> 
      <p>Supervisor Name : </p> 
      </p> 
    </div> 
</li> 
<li> 
     <span class="vcard"> 
     <a class="underline user-link" href="https://stackoverflow.com/users/jasmine">jasmine </a> 
     </span> 
     <div style="display: none;" class="image_hover"> 
      Professor 
      <p> 
      <a onclick="" href="#">Show additional details</a> 
      <a href="#">view</a> 
      <p>Employee ID : </p> 
      <p>Project Name: </p> 
      <p>Project Role : r</p> 
      <p>Supervisor Name : </p> 
      </p> 
    </div> 
</li> 

</ul> 

我試圖jQuery的代碼,當我們將鼠標懸停跨度(虛擬卡)的DIV中的鏈接旁邊以淡入

上而當懸停在身體​​的其他元素以外的鏈接或div淡出,該div必須淡出..

如何做?

一個我試圖淡化單位秒

 jQuery(document).ready(function(){ 
     var _selectedLinkEl = null; 
     var _detailEl = null; 
     var body = jQuery("body"); 
     var elem=null; 

     jQuery(".user-link").mouseover(function(event) { 
       _selectedLinkEl = this; 
       _detailEl=jQuery(event.target).parent().next(); 
       _detailEl.fadeIn("slow"); 
       elem=jQuery(this).parent().next(); 
       _href=jQuery(this).attr('href').split("/")[2]; 

       jQuery.post('/users/user_detail/?name='+_href, 
       function(data){ 

          elem.html(data).fadeIn("slow"); 
       });//post 

      body.mouseover(_bodyMouseOverFunction); 
    }); // user-link 

     var _bodyMouseOverFunction = function(event) { 

      // to add some conditions here 

      _detailEl.fadeOut("slow"); 
      body.unbind("mouseover", _bodyMouseOverFunction); 



      };// mouseover 

     });// doc ready 

我需要寫_bodyMouseOverFunction裏面的一些條件,但不知道如何指定.. 請給點建議

+0

讀縮進不好的代碼是艱難和令人煩惱,使得它不太可能,你會得到任何人的幫助。 – 2010-12-03 08:40:01

+0

@Marcelo Cantos - Indented ... – useranon 2010-12-03 08:46:30

回答

1

你可以寫上.mouseleave()事件而不是_bodyMouseOverFunction函數,例如

jQuery("li").mouseleave(function(e1){ 
    jQuery("div",jQuery(this)).fadeOut("slow");   
}); // user-link 

無論用戶何時移出內容div的鏈接,內容div都會自動隱藏。

working demo