问题描述:

I'm using Google Chrome Version 33.0.1750.154 m and jQuery's latest version, trying to transition background-color in & out upon button clicks. The transition in (fade in) goes just fine, with the background-color fading in gradually as expected. However, the transition out (from LightBlue to White upon clicking Deselect) is abrupt, rather than the gradual fade-out I had expected.

Could anyone please tell me (1) why the fade-out is abrupt, and (2) how I can make the fade-out gradual?

Thank you for your help.

<!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>

网友答案:

Change your CSS to following

table, th, td  { border:1px solid black;  }
  tr{ transition: background 2s ease-in-out; }
  .selected      { background-color: LightBlue; }

Also make sure you use -webkit, -moz, etc for best compatibility

(1) why the fade-out is abrupt - Because as per your CSS, '.selected' will have the transition only (2) how I can make the fade-out gradual? - give transition property to tr

相关阅读:
Top