jQuery中的淡出答案

【问题标题】：fadeout in jQueryjQuery中的淡出
【发布时间】：2011-05-19 00:52:24
【问题描述】：

我正在尝试添加一个 Jquery 函数，用于在跨度内的链接悬停时更新 div 我的html结构是

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

我写的jQuery是

我喜欢写

   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

});

上面的 jquery 更新了 image-hover div 并通过 fadeIn 显示 div 但它一直在淡出。

只有当我的鼠标悬停在 div(image_hover) 或任何正文元素之外时，我才会尝试淡出 DIV image_hover。

在这种情况下，如果我的鼠标位于链接或 div 或 div (image_hover) 内的任何元素上，则 Div 不应淡出..

请对此提出建议/。

怎么做？？

【问题讨论】：

标签： jquery mouseover fadein fadeout mouseout

【解决方案1】：

您的 HTML 是问题的一部分。要将这一点从需要保持打开的区域中拉出来，必须存在于您的触发器标签中，但我还注意到其他事情：

默认情况下隐藏包含“image_hover”的 DIV（因此无论如何都不起作用）。
您的 HTML 中没有可用作图像悬停的图像标记（只是看起来很奇怪）。
您在 2 个截然不同的对象（顶部 DIV 和“大约 1 天前”SPAN）中使用“时间线”CSS 类...似乎只有 1 个是时间线。
您有 2 个链接（例如锚点）暗示可能用作切换：“显示其他详细信息”和“查看”（是什么？）
您的每个链接切换都位于要切换的内部。
您有一个 SPAN 只是为了包含单词 by（不需要）
考虑将“时间线”标签移出切换区域。

因此，我更改了您的 HTML 并创建了下面的潜在解决方案。这将执行打开“详细信息”区域的所需行为（并在悬停时保持打开状态）。

此外，您实际上并不需要隐藏“详细信息”区域……但我还是把它留给了您。

同时，考虑以下潜在解决方案：

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

【讨论】：