Avatar billede webweaver Praktikant
11. juni 2011 - 00:03 Der er 5 kommentarer og
1 løsning

Problem med fade af billede

Godaften mennesker

Jeg sidder og bikser lidt med noget jQuery og fade af et billede. Helt simpelt. Fade funktionen jeg er kommet frem til, virker sådan set fint nok. Problemet er bare, at billedet skal starte på opacity 0 og det gør det ikke.

Jeg bliver nødt til at lave en mouseover på objektet, før at "scriptet starter". Hvorfor det? Det duer naturligvis ikke - medmindre billedet kan skjules.

http://www.lasse-jensen.dk/eksperten/preview.html

Jeg har lavet en lille demo her, som viser fejlen.
Meningen er, at ved mouseover på det lille billede, skal der fade et større billede ind et sted og ved mouseout skal billedet fade ud igen. Men som I kan se, vises det store billede så snart i går ind på sitet. Først når I har kørt en mouseover på det lille billede første gang, kører scriptet ...

jQuery er ikke min stærkeste side, så derfor henvender jeg mig her :)

På forhånd tak.

Mvh. Lasse Jensen
Avatar billede majbom Novice
11. juni 2011 - 00:13 #1
hvad sker der hvis du sætter den til:

<div class="picture" style="opacity: 0;">


?
Avatar billede webweaver Praktikant
11. juni 2011 - 04:10 #2
Som udgangspunkt, så virker det.

Problemet med opacity i CSS er, at objektet stadig findes. Det kan bare ikke ses. Der hvor jeg skal bruge det i praksis, der ligger det lille billede og det store billede oven i hinanden. Ikke som på mit eksempel, hvor de er placeret væk fra hinanden.

Dermed vil det sige, at jeg ikke kan komme til at lave en mouseover på det lille billede, fordi der ligger en div henover den, som bare er usynlig.

Kan man få scriptet til at hente noget z-indeks værdi med over?
Jeg har umiddelbart brug for, at den giver billedet der skal fades et z-indeks på -1 som standard og ved mouseout og ved mouseover en værdi på 1. Så skulle det fungere. Det kunne evt. bare gemmes i en variabel og smides ind som inline CSS.

Ellers har jeg brug for en funktion lignende opacity i CSS, men som fjerner objektet rigtigt og kan bringes tilbage via opacity i JavaScriptet.
Avatar billede webweaver Praktikant
14. juni 2011 - 16:25 #3
Nå, nu har jeg bikset lidt med det og fået det til at virke, ved at bearbejde det fra en anden vinkel. Så opstår der selvfølgelig nye problemer, men det tager jeg i en ny tråd.

splazz, du kan jo bare smide et svar, selvom det ikke helt løste problematikken, var svaret såmænd fornuftigt nok :-)
Avatar billede majbom Novice
14. juni 2011 - 18:38 #4
behold du dem bare selv :)
Avatar billede webweaver Praktikant
14. juni 2011 - 19:18 #5
Okay så :)
Avatar billede majbom Novice
14. juni 2011 - 19:38 #6
:)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester