我正在使用 Google Chrome 版本 33.0.1750.154 m 和 jQuery 的最新版本，尝试在单击按钮时将背景颜色转换为输入和输出。过渡(淡入)进行得很好，背景颜色按预期逐渐淡入。然而，过渡(在单击取消选择时从浅蓝色到白色)是突然的，而不是我预期的逐渐淡出。
谁能告诉我 (1) 为什么淡出是突然的，以及 (2) 我怎样才能使淡出逐渐淡出？
感谢您的帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Transition Test</title>
<style>
table, th, td { border:1px solid black; }
.selected { background-color: LightBlue;
transition: background 2s ease-in-out; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$(document).ready ( function() {
$('.selector').on ( 'click', function( event ) {
event.preventDefault() ;
$(this).closest('.containing').addClass('selected') ;
} ) ;
$('.deselector').on ( 'click', function( event ) {
event.preventDefault() ;
$(this).closest('.containing').removeClass('selected') ;
} ) ;
} ) ;
</script>
</head>
<body>
<table>
<tr class='containing'>
<td><button class='selector'>Select</button></td>
<td><button class='deselector'>Deselect</button></td>
<td>Washington</td>
<td>George</td>
</tr>
<tr class='containing'>
<td><button class='selector'>Select</button></td>
<td><button class='deselector'>Deselect</button></td>
<td>John</td>
<td>Adams</td>
</tr>
</table>
</body>
</html>
最佳答案
将您的 CSS 更改为以下内容
table, th, td { border:1px solid black; }
tr{ transition: background 2s ease-in-out; }
.selected { background-color: LightBlue; }
还要确保使用 -webkit、-moz 等以获得最佳兼容性
(1)为什么淡出突然 - 因为根据你的 CSS，'.selected' 将只有过渡 (2) 我怎样才能使淡出渐变？ - 将过渡属性赋予 tr
关于jquery - jQuery removeClass 时希望背景色逐渐过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22879852/