jquery ändra size bild - next & prev

sifixMedlem sedan maj 200373 inlägg

Frågan20 jan. 2011 00:54#1

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>

voigtann1Medlem sedan juni 20019 519 inlägg

20 jan. 2011 06:21#2

$(this).next() då this är ett bilden så finns det inte något next eller prev på den noden du är inne i, du måste upp en nod och ta next (så du få nästa li-element) och hämta ut child elementen där, något i stil med:

$("ul#nav li .simg").hover(function() {
	var el = $(this).parent(),
		nextImage = $(el).next().find("img"),
		prvImage = $(el).next().find("img");

	$(el).find("img").animate({ 
		height: "128px", 
		width: "128px"
	}, 200);

	nextImage.add(prvImage).find("img").animate({ 
		height: "80px", 
		width: "80px"
	}, 200);

},function(){
	var el = $(this).parent(),
		nextImage = $(el).next().find("img"),
		prvImage = $(el).next().find("img");

	$(this).find("img").add(nextImage).add(prvImage).animate({ 
		height: "50px", 
		width: "50px"
	}, 200);

});

(ej testad kod)

sifixMedlem sedan maj 200373 inlägg

20 jan. 2011 11:38#3

Tackar voigtann1, även om din kod inte fungerar rakt av så förstår jag varför min kod inte fungerade. Och ska nog kunna fixa till det med hjälp av din kod.