带有 jQuery 悬停淡入淡出效果的表格答案

【问题标题】：Table with jQuery hover fade effect带有 jQuery 悬停淡入淡出效果的表格
【发布时间】：2015-02-15 07:45:38
【问题描述】：

试图让下面的代码工作以突出显示整行而不是一个单元格。

JS：

$(document).ready(function(){
    $('td[id*="dataRow"]').stop().animate({"opacity": "0.2"}, "slow");

    $('td[id*="dataRow"]').hover(
    function() {
       $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).stop().animate({"opacity": "0.2"}, "slow");
    });
});

任何帮助都会很棒！

【问题讨论】：

你也可以只用 css 来做。类似codepen.io/jackrugile/pen/EyABe

标签： jquery html-table hover jquery-animate fade

【解决方案1】：

使用siblings()

$(document).ready(function(){
    $('td[id*="dataRow"]').stop().animate({"opacity": "0.2"}, "slow");
        
    $('td[id*="dataRow"]').hover(
    function() {
       $(this).stop().animate({"opacity": "1"}, "slow");
        $(this).siblings().stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).stop().animate({"opacity": "0.2"}, "slow");
         $(this).siblings().stop().animate({"opacity": "0.2"}, "slow");
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover table-checkable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
	<thead>
		<tr role="row">
        	<th id="dataTitle0" class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="Event Date" style="width: 114px;">Event Date</th>
            <th id="dataTitle1" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending" style="width: 99px;">Time</th>
            <th id="dataTitle2" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 300px;">Name</th>
            <th id="dataTitle3" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Address: activate to sort column ascending" style="width: 185px;">Address</th>
            <th id="dataTitle4" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Zip: activate to sort column ascending" style="width: 37px;">Zip</th>
            <th id="dataTitle5" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Latitude/Long: activate to sort column ascending" style="width: 148px;">Latitude/Long</th>
            <th id="dataTitle6" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="City: activate to sort column ascending" style="width: 86px;">City</th>
            <th id="dataTitle7" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="State: activate to sort column ascending" style="width: 33px;">State</th>
            <th id="dataTitle8" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="County: activate to sort column ascending" style="width: 78px;">County</th>
            <th id="dataTitle9" class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Advocate: activate to sort column ascending" style="width: 60px;">Advocate</th>
		</tr>
	</thead>
	<tbody role="alert" aria-live="polite" aria-relevant="all">
    	<tr class="even">
    		<td id="dataRow0" data-text="Event Date" class=" ">11/15/2014 12:00:00 AM</td>
            <td id="dataRow1" data-text="Time" class=" ">12:00 p.m.</td>
            <td id="dataRow2" data-text="Name" class=" ">A place here</td>
            <td id="dataRow3" data-text="Address" class=" ">9999 west street name</td>
            <td id="dataRow4" data-text="Zip" class=" ">00000</td>
            <td id="dataRow5" data-text="Latitude/Long" class=" ">3.0442263,-21.1500054</td>
            <td id="dataRow6" data-text="City" class=" ">City</td>
            <td id="dataRow7" data-text="State" class=" ">ST</td>
            <td id="dataRow8" data-text="County" class=" ">County</td>
            <td id="dataRow9" data-text="Advocate" class=" ">Yo momma</td>
     	</tr>
        <tr class="odd">
    		<td id="dataRow0" data-text="Event Date" class=" ">11/15/2014 12:00:00 AM</td>
            <td id="dataRow1" data-text="Time" class=" ">12:00 p.m.</td>
            <td id="dataRow2" data-text="Name" class=" ">A place here</td>
            <td id="dataRow3" data-text="Address" class=" ">9999 west street name</td>
            <td id="dataRow4" data-text="Zip" class=" ">00000</td>
            <td id="dataRow5" data-text="Latitude/Long" class=" ">3.0442263,-21.1500054</td>
            <td id="dataRow6" data-text="City" class=" ">City</td>
            <td id="dataRow7" data-text="State" class=" ">ST</td>
            <td id="dataRow8" data-text="County" class=" ">County</td>
            <td id="dataRow9" data-text="Advocate" class=" ">Yo momma</td>
     	</tr>
        <tr class="even">
    		<td id="dataRow0" data-text="Event Date" class=" ">11/15/2014 12:00:00 AM</td>
            <td id="dataRow1" data-text="Time" class=" ">12:00 p.m.</td>
            <td id="dataRow2" data-text="Name" class=" ">A place here</td>
            <td id="dataRow3" data-text="Address" class=" ">9999 west street name</td>
            <td id="dataRow4" data-text="Zip" class=" ">00000</td>
            <td id="dataRow5" data-text="Latitude/Long" class=" ">3.0442263,-21.1500054</td>
            <td id="dataRow6" data-text="City" class=" ">City</td>
            <td id="dataRow7" data-text="State" class=" ">ST</td>
            <td id="dataRow8" data-text="County" class=" ">County</td>
            <td id="dataRow9" data-text="Advocate" class=" ">Yo momma</td>
     	</tr>
        <tr class="odd">
    		<td id="dataRow0" data-text="Event Date" class=" ">11/15/2014 12:00:00 AM</td>
            <td id="dataRow1" data-text="Time" class=" ">12:00 p.m.</td>
            <td id="dataRow2" data-text="Name" class=" ">A place here</td>
            <td id="dataRow3" data-text="Address" class=" ">9999 west street name</td>
            <td id="dataRow4" data-text="Zip" class=" ">00000</td>
            <td id="dataRow5" data-text="Latitude/Long" class=" ">3.0442263,-21.1500054</td>
            <td id="dataRow6" data-text="City" class=" ">City</td>
            <td id="dataRow7" data-text="State" class=" ">ST</td>
            <td id="dataRow8" data-text="County" class=" ">County</td>
            <td id="dataRow9" data-text="Advocate" class=" ">Yo momma</td>
     	</tr>
  	</tbody>
</table>

【讨论】：

【解决方案2】：

你应该定位.parent()。

$(document).ready(function(){
    $('td[id*="dataRow"]').parent().stop().animate({"opacity": "0.2"}, "slow");

    $('td[id*="dataRow"]').hover(
    function() {
       $(this).parent().stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).parent().stop().animate({"opacity": "0.2"}, "slow");
    });
});

小提琴：http://jsfiddle.net/poxpsdza/4/

【讨论】：

感谢您的快速回复，伊曼纽尔。如果您快速将鼠标悬停在所有表格上，是否有任何可能的方法来阻止动画变得疯狂？

【解决方案3】：

我建议使用选择器tbody tr

$(document).ready(function(){
    $('#DataTables_Table_0 tbody tr').stop().animate({"opacity": "0.2"}, "slow");

    $('#DataTables_Table_0 tbody tr').hover(
    function() {
       $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).stop().animate({"opacity": "0.2"}, "slow");
    });
});

【讨论】：

我会，但同一页面上可能还有其他表格，我不需要它们来产生那种效果。
那么你需要像#DataTables_Table_0 tbody tr这样的选择器

【解决方案4】：

为什么不简化它并直接针对该行？

$(document).ready(function(){
    $('tr').stop().animate({"opacity": "0.2"}, "slow");

    $('tr').hover(
    function() {
       $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).stop().animate({"opacity": "0.2"}, "slow");
    });
});

http://jsfiddle.net/smurphy/5912eh8d/

【讨论】：