---
title: "jquery ändra size bild - next & prev"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/185856-jquery-ändra-size-bild-next-prev"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "sifix"
published: "2011-01-20T00:54:08.000Z"
updated: "2011-01-20T11:38:23.000Z"
replies: 2
views: 1715
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/185856-jquery-ändra-size-bild-next-prev"
---

# jquery ändra size bild - next & prev

## #1 — sifix, 2011-01-20T00:54Z

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>
```

Permalänk: https://www.webforum.nu/p/185856

## #2 — voigtann1, 2011-01-20T06:21Z

$(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)

Permalänk: https://www.webforum.nu/p/2266612

## #3 — sifix, 2011-01-20T11:38Z

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.

Permalänk: https://www.webforum.nu/p/2266626

---

Tråden på webben: https://www.webforum.nu/amne/javascript/185856-jquery-ändra-size-bild-next-prev
