Började med jquery idag och har kört fast med next och prev när jag försöker ändra storlek på bilder.
Den ändrar storlek på den bild jag har musen över men inte den före och efter.
Det fungerade när jag hade text och ändrade font-size. (bifogar denna kod under den som inte fungerar)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul#nav li .simg").hover(function() {
$(this).animate({
height: "128px",
width: "128px"
}, 200);
$(this).next().animate({
height: "80px",
width: "80px"
}, 200);
$(this).prev().animate({
height: "80px",
width: "80px"
}, 200);
},function(){
$(this).animate({
height: "50px",
width: "50px"
}, 200);
$(this).next().animate({
height: "50px",
width: "50px"
}, 200);
$(this).prev().animate({
height: "50px",
width: "50px"
}, 200);
});
});
</script>
<style type="text/css">
ul#nav {list-style: none; padding: 0; margin: 0; }
ul#nav li {float: left;margin: 0 2px;font-size:14px;line-height:20px;font-weight:bold;}
ul#nav li img.simg { width:50px;}
</style>
</head>
<body>
<ul id="nav">
<li><img src="bild.png" alt="" class="simg" /></li>
<li><img src="bild.png" alt="" class="simg" /></li>
<li><img src="bild.png" alt="" class="simg" /></li>
<li><img src="bild.png" alt="" class="simg" /></li>
<li><img src="bild.png" alt="" class="simg" /></li>
<li><img src="bild.png" alt="" class="simg" /></li>
<li><img src="bild.png" alt="" class="simg" /></li>
</ul>
</body>
</html>
Denna koden fungerar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li").hover(function() {
$(this).animate({
fontSize: "18px"
}, 20);
$(this).next().animate({
fontSize: "16px"
}, 20);
$(this).prev().animate({
fontSize: "16px"
}, 20);
},function(){
$(this).animate({
fontSize: "14px"
}, 20);
$(this).next().animate({
fontSize: "14px"
}, 20);
$(this).prev().animate({
fontSize: "14px"
}, 20);
});
});
</script>
<style type="text/css">
ul {list-style: none;padding: 0;margin: 0;}
li{float: left;margin: 0 2px;font-size:14px;line-height:20px;font-weight:bold;}
</style>
</head>
<body>
<ul id="nav">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</body>
</html>