[jQuery] Background image change fade transition
Hi all
I've just started using jQuery (it's great!) and I'm looking to re-
factor what I have written to have a fade transition between each
image change. Any ideas would be greatly appreciated!
My code is below, many thanks in advance! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery/jquery-1.2.3.pack.js"></
script>
<script type="text/javascript">
$(document).ready(function(){
$(".small")
.hover(function(){
$("#big").css("backgroundImage", "url(" + $(this).attr("big") +
")");
});
});
</script>
</head>
<body>
<table>
<tr>
<td id="big" style="background:url(img/amazing-cars.jpg); height:
200px; width: 200px;"></td>
</tr>
</table>
<br />
<br />
<br />
<img class="small" src="img/t_amazing-cars.jpg" big="img/amazing-
cars.jpg" />
<img class="small" src="img/t_Cars.jpg" big="img/Cars.jpg" />
<img class="small" src="img/t_ethel-cars.jpg" big="img/ethel-
cars.jpg" />
</body>
</html>