带有 jQ​​uery 悬停淡入淡出效果的表格

Posted

技术标签:

【中文标题】带有 jQ​​uery 悬停淡入淡出效果的表格【英文标题】: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/

【讨论】:

以上是关于带有 jQ​​uery 悬停淡入淡出效果的表格的主要内容,如果未能解决你的问题,请参考以下文章

jquery悬停图像淡入淡出交换

html 简单的淡入淡出图像悬停效果

在列表项悬停时更改图像时添加淡入/淡出效果的问题

css 框 - 图标加 - 悬停淡入淡出效果

transition实现的鼠标悬停淡入淡出的效果

jQuery在悬停时更改(带有淡入淡出动画)div的背景图像