带有 jQuery 悬停淡入淡出效果的表格
Posted
技术标签:
【中文标题】带有 jQuery 悬停淡入淡出效果的表格【英文标题】：Table with jQuery hover fade effect 【发布时间】：2015-02-15 07:45:38 【问题描述】：试图让下面的代码工作以突出显示整行而不是一个单元格。
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");
);
);
任何帮助都会很棒！
【问题讨论】：
你也可以只用 css 来做。类似codepen.io/jackrugile/pen/EyABe 【参考方案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/
【讨论】：
以上是关于带有 jQuery 悬停淡入淡出效果的表格的主要内容，如果未能解决你的问题，请参考以下文章