表与jQuery悬停淡出效果

时间：2014-12-16 21:20:00

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

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

JSFiddle

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");
    });
});

任何帮助都会很棒！

4 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：1)

您应定位.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/

答案 2 :(得分：0)

我建议使用selector 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");
    });
});

答案 3 :(得分：0)

为什么不简化它并直接定位行？

$(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/

相关问题
最新问题