hover-effect/index.php

<?php include '../config.php' ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Hover effect</title>

	<?php include DOCROOT.'header.php' ?>
	<style type="text/css">
		table
		{
			border-collapse: collapse;
			cursor: default;
			margin: auto;
		}
		th, td
		{
			border: 1px solid #ccc;
			padding: .2em .7em;
		}
	</style>

	<script type="text/javascript">

		function hoverHandler(event)
		{
			switch(event.type)
			{
				case 'mouseenter':
					$(this)
						// Stop animation where it is
						.stop(true)
						// Start fading up
						.animate({backgroundColor:'#fd8'}, 'fast');
					break;

				case 'mouseleave':
					$(this)
						// Jump to end of animation
						.stop(true, true)
						// Start fading down
						.animate({backgroundColor:'transparent'}, 'slow');
					break;
			}
		}

		$(function()
		{
			$('table').delegate('tbody tr', 'hover', hoverHandler);
		});

	</script>


</head>
<body>

	<h1>Hover effect</h1>

	<p><a href=".">Plain</a> | <a href="alt.php">Alternate</a></p>

	<table>
		<tr><th>01</th><td>Pellentesque eleifend sem sed metus porta in ultricies elit pulvinar.</td></tr>
		<tr><th>02</th><td>Pellentesque adipiscing ante dictum nibh sodales et cursus sem laoreet.</td></tr>
		<tr><th>03</th><td>Curabitur eleifend neque non velit tempor sed vulputate tortor sollicitudin.</td></tr>
		<tr><th>04</th><td>Nullam et ante ipsum, a pretium lectus.</td></tr>
		<tr><th>05</th><td>Aenean mollis tellus sit amet dui vestibulum non elementum nisi volutpat.</td></tr>
		<tr><th>06</th><td>Morbi ut dolor nisi, a cursus purus.</td></tr>
		<tr><th>07</th><td>Fusce ut nibh at ante tincidunt venenatis.</td></tr>
		<tr><th>08</th><td>Maecenas ac sapien orci, vel mollis turpis.</td></tr>
		<tr><th>09</th><td>Sed ut enim augue, vitae laoreet magna.</td></tr>
		<tr><th>10</th><td>Vestibulum vel neque purus, in lacinia ligula.</td></tr>
		<tr><th>11</th><td>Integer cursus leo accumsan arcu vehicula semper.</td></tr>
		<tr><th>12</th><td>Duis non dui ac turpis egestas semper.</td></tr>
		<tr><th>13</th><td>In vitae justo at leo elementum lobortis.</td></tr>
		<tr><th>14</th><td>In bibendum aliquet augue, eu tempor velit lacinia a.</td></tr>
		<tr><th>15</th><td>Praesent et mauris quis dui interdum sollicitudin in vel erat.</td></tr>
	</table>


	<?php $article = 1165; include DOCROOT.'footer.php'; ?>

</body>
</html>