---
title: "Fade i IE"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/189157-fade-i-ie"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Vixnor"
published: "2012-02-17T14:34:38.000Z"
updated: "2012-02-26T06:59:12.000Z"
replies: 9
views: 889
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/189157-fade-i-ie"
---

# Fade i IE

## #1 — Vixnor, 2012-02-17T14:34Z

Vill ha fade på bilder onMouseOver...

```
		<div class="imgcontainer">
		<img src="bild1.jpg" class="hoverfade"/>
		</div>
```

CSS:

```
<style>
.imgcontainer { background-color: white; display: inline-block; }
.imgcontainer img { opacity: 0.8; display: block; }	
</style>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
```

\<body\>

```
<script>
$(function () {
    $('img.hoverfade')
        .each(function () { $(this).wrap('<div class="imgcontainer"/>'); })
        .on('mouseenter', function () { $(this).fadeTo(200, 1); })
        .on('mouseleave', function () { $(this).fadeTo(200, 0.8); });
});
</script>
```

Det funkar i vissa webbläsare, men jag måste få det att fungera i alla.

Finns det någon som har tips på någon lösning?

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

## #2 — Nate.A, 2012-02-17T14:58Z

```
img.hoverfade {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  /* IE 5-7 */
  filter: alpha(opacity=80);

  /* Netscape */
  -moz-opacity: 0.8;

  /* Safari 1.x */
  -khtml-opacity: 0.8;

  /* Good browsers */
  opacity: 0.8;
}
```

..eller..

```
$('img.hoverfade').css('opacity':0.8).hover(
    function(){
        $(this).fadeTo(200, 1);
    },function(){
        $(this).fadeTo(200, 0.8);
});
```

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

## #3 — Vixnor, 2012-02-17T16:21Z

Det funkar inte i IE. Men jag har använt jQuery till bildgallerier som fungerar i alla webbläsare, så jag tycker att onMouseOver med fade borde fungera också...

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

## #4 — voigtann1, 2012-02-17T18:12Z

Nate.A´s lösning borde fungera i IE (ren CSS)

Det ända som är fel i jquery koden är att han försökte köra: **.css("opacity", 0.8)** eller **.css({"opacity": 0.8})**

<http://jsbin.com/exiyow/edit#javascript,html,live>

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

## #5 — Nate.A, 2012-02-17T19:01Z

Aha, sedär ja! Tack för rättelsen. :)

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

## #6 — Vixnor, 2012-02-18T00:56Z

(att bilden flyttar sig om man använder class="hoverfade" eller ej)

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

## #7 — voigtann1, 2012-02-18T06:29Z

Finns det en css klass som gör det?

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

## #8 — Vixnor, 2012-02-18T22:21Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1547716)**
>
> Finns det en css klass som gör det?

Vet inte hur det gick till, men på något sätt blev jag av med det.

Men när bilderna ska fadeas "tillbaka" till opacity 0.8, så blir det först mörkare och sen helt plötsligt ljusare (använder vit bakgrundsfärg).
Men när jag använder <http://www.webforum.nu/images/wfstandard/logo_webforum.gif> fungerar det. 
Mina bilder är drygt 210x270 .jpg

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

## #9 — Vixnor, 2012-02-25T22:35Z

Ingen som vet varför bildernas fade blir fel om man använder vit bakgrund?

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

## #10 — voigtann1, 2012-02-26T06:59Z

det är ju inget fel med att köra med vit bakgrund, du få nog posta ett exempel som visar ditt problem, ser inte något konstigt när jag kör mitt exempel

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/189157-fade-i-ie