fadeout in jQuery

Question

I am trying to add a Jquery function for updating a div on hover of a link inside a span my html structure is

  <ul><li>
      <div class="timeline">


         <span>by</span>
         <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>

         <span class="timeline">about 1 day ago</span>
    </div>
    </li>
    <li>
      <div class="timeline">


         <span>by</span>
         <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>
         <span class="timeline">about 1 day ago</span>
    </div>
    </li>
 </ul>

The jQuery i have written is

I wrote like

   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.show();
  _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).show();
            elem.html(data).fadeIn("slow");
     });//post

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

var _bodyMouseOverFunction = function(event) {
        if(event.target != _selectedLinkEl &&      
           event.target != _detailEl &&
           jQuery.inArray(_detailEl, jQuery(event.target).parent() ) == -1) {

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

});

The above jquery updates the image-hover div and its displaying the div by fadeIn but its getting fadeout at all times .

I am trying to fade out the DIV image_hover only if my mouse hover is out of the div(image_hover) or any body elements..

In the cases , if my mouse is on the link or on the div or on any of the elements inside the div (image_hover) , the Div should not fadeout..

Please give suggestions for this/.

How to do so ??

Prisoner ZERO Prisoner ZERO · Accepted Answer · 2011-03-31T12:16:56

Your HTML is part of the issue. To pull this off the area that needs to remain open has to live within your triggers tag, but I noticed other things as well:

The DIV containing the "image_hover" is hidden by default (so won't work anyhow).
There is no image tag in your HTML to be used as an image-hover (just seemed odd).
You're using the "timeline" CSS class on 2 distinctly different objects (the top DIV and in the "about 1 day ago" SPAN)...only 1 seems to be a timeline.
You have 2 links (e.g. anchors) that imply possible usage as toggles: "Show additional details" and "view" (which is it?)
Each of your link-toggles live inside that which is to be toggled.
You have a SPAN simply to contain the word by (not needed)
Consider moving your "timeline" tag OUT of the toggle-area.

As such, I altered your HTML and created the potential solution below. This will execute the desired behavior of opening the "details" area (and will remain open while hovering).

Additionally, you don't really need to hide the "details" area...but I left that in for you anyway.

In The Meantime, Consider The Following Potential Solution:

<html>
<head runat="server">
    <title></title>

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script>

    <style type="text/css">
        .vCard
        {
            font-family: Arial;
        }
        .vCard a
        {
             text-decoration: none;
        }
        .vCard a.owner
        {
             color: Green;
        }
        .vCard span.timeline
        {
            color:Navy;
        }
        .vCard span.timeline div.type
        {
            display: none;
        }
        .vCard span.timeline div.type div.details
        {
            display: none;
            margin-left: 20px;
        }
    </style>

    <script type="text/javascript">

        function hoverIn() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeIn('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeIn('Fast');
            });
        }

        function hoverOut() {

            var card = jQuery(this).parent();
            var cardType = jQuery('div.type', card);

            cardType.fadeOut('fast', function() {
                var cardTypeDetails = jQuery('div.details', this);
                cardTypeDetails.fadeOut('Fast');
            });
        }

        jQuery(document).ready(function() {

            var context = jQuery('#myList');

            // This will target the SPECIFIC timeline object(s).
            jQuery('li div.vCard span.timeline', context).hover(hoverIn, hoverOut);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ul id="myList">
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/aruna">Aruna </a>
                    <span class="timeline">
                        about 1 hours ago
                        <div class="type">
                            <a href="#">Student</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
            <li>
                <div class="vCard">
                    by
                    <a class="owner" href="/users/jasmine">Jasmine </a>
                    <span class="timeline">
                        about 2 days ago
                        <div class="type">
                            <a href="#">Professor</a>
                            <div class="details">
                                <div>
                                    Employee ID:<label></label>
                                </div>
                                <div>
                                    Project Name:<label></label>
                                </div>
                                <div>
                                    Project Role:<label></label>
                                </div>
                                <div>
                                    Supervisor Name:<label></label>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>

fadeout in jQuery

1 Answers