JQuery fadeOut operation

i am having a html structure like

<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>

I tried a code in jQuery as when we hover on the link inside the span(vcard) the div next to that to fadeIn

And when on hover on other elements of the body other than the link or the div which fades on , the div has to fade Out ..

How to do so ??

The one i tried to fade In s

     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

I need to write some conditions inside the _bodyMouseOverFunction but dont know how to specify .. Please give suggestions

Answers


You can write .mouseleave() event on li instead of _bodyMouseOverFunction function, e.g.

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

whenever user moves out either of link of content div, content div will hide automatically.

working demo


Need Your Help

Is there polynomial algorithm to this? Possibly dynamic programming approach?

algorithm dynamic-programming

Assume you are given a set A = {1, 2, ..., m} and a set B = {1, 2, ..., n}, such that each element from the set A has to be assigned to some element from B. The following parameters for each elemen...

Good ways to capture website traffic statistics

language-agnostic

I tried AWStats but its painfully difficult to configure it(nginx logs dont rotate, stats dont get updated) and Google analytics has a lag of almost 12-14 hours. Are there any other options?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.