jQuery淡出操作答案

【问题标题】：JQuery fadeOut operationjQuery淡出操作
【发布时间】：2010-12-03 17:00:56
【问题描述】：

我有一个类似的html结构

<ul>
 <li>   <span class="vcard">
            <a class="underline user-link" href="/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="/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 中尝试了一个代码，因为当我们将鼠标悬停在 span(vcard) 内的链接上时，旁边的 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 中写一些条件，但不知道如何指定.. 请提出建议

【问题讨论】：

阅读缩进不佳的代码既困难又令人沮丧，使您不太可能从任何人那里获得帮助。
@Marcelo Cantos -- 缩进...
fadeout in jQuery的可能重复
坦率地说，它更好，但仍然很糟糕。为什么用户链接没有进一步缩进？为什么body.mouseover(_bodyMouseOverFunction); 与同一块中的每一行缩进不同（对于整个代码中的几行也是如此）？为什么_bodyMouseOverFunction 的结尾} 用// mouseover 注释（这与实际上调用mouseover 的另一行混淆了）？

标签： jquery fadeout

【解决方案1】：

您可以在 li 上写 .mouseleave() 事件而不是 _bodyMouseOverFunction 函数，例如

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

每当用户移出内容 div 的任一链接时，内容 div 都会自动隐藏。

working demo

【讨论】：

即使我尝试将鼠标悬停在 div 上，我也会一直淡出...
我写了一个条件，当鼠标悬停在链接上时不淡出 .if(event.target = _selectedEl){//fadeout}
但是当悬停在 Div 或 div 的任何子元素上时，如何添加条件以保持 div ....
谢谢你，我现在已经完成了 mouseleave 功能.. 非常感谢