hoverLineGrow/index.html at master · nitech/hoverLineGrow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php
/**
 * HoverLineGrow
 * Simon Pedersen @ good-morning.no
 */
?><!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="no"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="no"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="no"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->
<head>
	<meta charset="utf8" />

    <title>HoverLineGrow</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="js/jquery.easing.js"></script>

	<script src="js/hoverLineGrow.jquery.js"></script>

	<style>
		a {
			text-decoration:none;
		}
	</style>
	<script>
		$(function() {

			// apply hoverLineGrow to all a tags
		    $("a").hoverLineGrow({
		    	variant: "left-to-right",
		    	easeOver: "easeOutQuad",
		    	durationOver: 100,
		    	easeOut: "easeOutQuad",
		    	style: "1px solid",
		    	/* padding: 1, */
		    	top: 17
		    });

		});
	</script>

</head>
<body>

	<p>The purpose of this plugin is to:</p>
	<ul>
		<li>Satisfy Jørgens need for <a href="#">fancy underlines</a></li>
		<li>Satisfy Jørgens need for <a href="#">high end web</a></li>
		<li>Satisfy Jørgens need for <a href="#">artistic expression</a></li>
		<li>Satisfy Jørgens need for <a href="#">FWAs</a></li>
		<li>Satisfy Jørgens need for <a href="#">gull i gulltaggen</a></li>
		<li>(though it doesn't work with <a href="#">line<br>breaks</a>)</li>
	</ul>

</body>
</html>