VixnorMedlem sedan okt. 200946 inlägg 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?
Nate.AMedlem sedan mars 2006296 inlägg 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);
});
VixnorMedlem sedan okt. 200946 inlägg 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å...
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
Nate.AMedlem sedan mars 2006296 inlägg Aha, sedär ja! Tack för rättelsen. :)
VixnorMedlem sedan okt. 200946 inlägg (att bilden flyttar sig om man använder class="hoverfade" eller ej)
Finns det en css klass som gör det?
VixnorMedlem sedan okt. 200946 inlägg
voigtann1 skrev:
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
VixnorMedlem sedan okt. 200946 inlägg Ingen som vet varför bildernas fade blir fel om man använder vit bakgrund?
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
