I'm writing some code to magnify text once you hover over it if you have the Magnify checkbox selected. It works to turn on the magnifier but I can't figure out how to turn it off once the checkbox is unselected.
textmagn.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Magnification</title>
<link rel="stylesheet" type="text/css" href="lines.css">
</head>
<body>
<ul>
<p>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src='http://ift.tt/19puDaP'></script>
<script src="javasc.js"></script>
<a>This is a sentece.</a>
<a>A very long sentence.</a>
<a>Magnify this sentence.</a>
</p>
</ul>
<input type="checkbox" name="check">
Magnify
</body>
</html>
javasc.sc
$(document).ready(function() {
$('input[type="checkbox"][name="check"]').change(function() {
if(this.checked) {
$('a').hover(function(){
$(this).animate({'z-index':'1','font-size':'30px'},50);
},
function(){
$(this).animate({'z-index':'0','font-size':'15px'},50);
});
}
});
});
lines.css
a {
text-decoration:none;
font-size: 15px;
}
ul {
list-style-type:none;
}
li {
display: inline;
padding-left: 50px;
}
Aucun commentaire:
Enregistrer un commentaire