Jquery悬停在文本上以使元素切换

Question

我正在处理一张表格，我希望在将鼠标悬停在该表格上 500 毫秒时，在该表格上显示额外的一行信息。

$(document).ready(function(){
    $('.collapsed').hide();
    $("td#name").hover(function() {
       $(this).children('.collapsed').delay(500).slideToggle(100);
    })
});

jsfiddle 在这里： http://jsfiddle.net/y4Mdy/846/

我遇到的两个问题： 1) 切换时，“文本”列中的文本向下移动。我希望它保持原样，即“将鼠标悬停在我身上以获取信息”应继续与“这是一些附加文本”保持一致。我试过添加 clear:left，但这并不能解决问题。

2) 我已经为切换设置了延迟，因为我不希望在用户将鼠标保持在那里一段时间之前显示附加信息......也就是说，只需将鼠标短暂地悬停在文本上不会触发显示的附加文本。然而，使用延迟只会使附加文本稍后显示。如果您只是从表格底部开始并将鼠标快速移动到顶部，则此行为很明显。显示所有附加信息行。我怎样才能防止这种情况发生？

Answer 1

首先，元素 ID 是唯一的，您只能在有效文档中拥有它们一次。所以我将id="name" 的所有实例更改为class="name"，并将id="small" 的所有实例更改为class="small。

其次，我使用setTimeout() 和clearTimeout() 的组合来创建所需的延迟，但没有“链接”延迟。

最后，slideToggle()（以及相关的slideUp 和slideDown）似乎引起了问题，因此我将其替换为fadeIn() 和fadeOut()。我相信这会产生预期的行为，但如果不是，请告诉我。

HTML

<table class="listings"> 
    <thead> 
        <tr> 
            <th class="star"><span title="Save listing to favorites">&#9734;</span></th> 
            <th colspan="3">Description</th> 
            <th colspan="2">Text</th> 
        </tr> 
    </thead> 

    <tbody> 
        <tr> 
            <td class="star"><span title="Save listing to favorites">&#9734;</span></td> 

            <td class="name" colspan="3">Hover over me for more info.
                <span class="collapsed">Here is some hovered over text.</span> 
            </td> 
            <td class="small" colspan="2">Here is additional text.</td>
        </tr> 

         <tr> 
            <td class="star"><span title="Save listing to favorites">&#9734;</span></td> 

            <td class="name" colspan="3">Hover over me for more info.
                <span class="collapsed">Here is some hovered over text.</span> 
            </td> 
            <td class="small" colspan="2">Here is additional text.</td>
        </tr> 

         <tr> 
            <td class="star"><span title="Save listing to favorites">&#9734;</span></td> 

            <td class="name" colspan="3">Hover over me for more info.
                <span class="collapsed">Here is some hovered over text.</span> 
            </td> 
            <td class="small" colspan="2">Here is additional text.</td>
        </tr> 

    </tbody> 
</table> 

CSS（只是一个小改动以反映从 ids 到类的变化）

div.left-and-right {
    margin-left:auto;
    margin-right:auto;
    position:relative;
    margin-top:5%;
    width:90%;
    min-height:300px;
}

.listings {
    width:100%;
    border-collapse:collapse;
    border:1px solid #E18728;
    font-size:1em;
}

.listings td {
    padding:5px 10px;
    text-align:left;
}

.listings th {
    padding:5px 10px;
    margin:0px 10px;
    background-color:#E18728;
    text-align:left;
}

.listings tr:nth-child(odd) {
    background-color:#F6F6F6;
    border-top:1px solid #EAE8E8;
    border-bottom:1px solid #EAE8E8;
}
td.small {
    font-size:0.8em;
    padding-top:8px;
    vertical-align:top;
}

.star {
    padding:5px;
    margin:0px;
}

.collapsed{
    display:block;
    margin-top:40px;
}

Javascript

var timeoutID;

$(document).ready(function(){
    $('.collapsed').hide();

    $("td.name").hover(
        function(){
            thisThing = $(this);
            timeoutID = setTimeout(function(thisThingHere){
                thisThingHere.children('.collapsed').fadeIn(100);
            }, 500, thisThing);},
        function(){
            clearTimeout(timeoutID);
            $(this).children('.collapsed').fadeOut(100);
        }
    );      
});

DEMO