Avatar billede n-emy Nybegynder
08. februar 2010 - 18:58 Der er 4 kommentarer og
1 løsning

Bruge jquery til at fremvise en skjult boks

Hejsa

Jeg er lige begyndt på jquery og er kommet til en, for mig, lille hovedbryder.

Jeg tester en funktion, hvor en boks (med klassen boxtest) er skjult med følgende css:

.boxtest {
font-family: Verdana;
font-size: 13px;
font-weight: normal;
color:blue;
background-color:#e2e2e2;
width:100px;
height:100px;
visibility:hidden;
}

(Derudover er denne klasse i css-delen)

.boxtestshow {
font-family: Verdana;
font-size: 13px;
font-weight: normal;
color:blue;
background-color:#e2e2e2;
width:100px;
height:100px;
visibility:visible;
}

Meningen er så, at når når dokumentet er klart skal den skjulte boks langsomt fade frem, har forsøgt mig på følgende måde uden held:

$(".boxtest").addClass("boxtestshow").show(1000);

Problemet er at ligesåsnart dokumentet er klart bliver klassen ændret til den synlige, og jeg får en synlig boks uden den fade effekt jeg gerne ville have.

Jeg har testet den modsatte effekt og den virker:

$(".boxtest").addClass("boxtestshow").hide(1000);

Er der en der kan være behjælpelig så ville jeg blive meget glad? =)
Avatar billede intenz Novice
08. februar 2010 - 20:26 #1
Du skal bruge display i stedet for visibility i din css. Udover det er der ingen grund til at du har to identiske classer i din css fil.

Det er lidt smartere at dele det op i css filen (gør det hele nemmere at styre).
I den stil her:

<style>
.boxtest {
font-family: Verdana;
font-size: 13px;
font-weight: normal;
color:blue;
background-color:#e2e2e2;
width:100px;
height:100px;
}
.hidden {
display: none;
}
</style>
<div class="boxtest hidden">test</div>


Så skal du bare bruge show/hide sådan her:
$(".boxtest").show(1000);
$(".boxtest").hide(1000);
Avatar billede BrJoe Nybegynder
09. februar 2010 - 00:17 #2
Som intenz skriver skal du bruge show/hide metoden.

Når siden er klar skal den skjule boksen før den kan fade frem, og for at den ikke skal fade ud og derefter fade ind igen ved start skal du gøre således:

$('.boxtest').hide();
$('.boxtest').show(1000);
Avatar billede n-emy Nybegynder
09. februar 2010 - 20:39 #3
Tak for hjælpen det virkede =)

Jeg har dog et spørgsmål mere relateret til dette. Er det muligt at sætte en delay på funktionen?

Så den eksempelvis kører show ligeså snart siden loades og køre hide efter x antal sekunder?
Avatar billede n-emy Nybegynder
09. februar 2010 - 22:32 #4
Fandt en løsning =)
Avatar billede BrJoe Nybegynder
17. februar 2010 - 15:45 #5
Ja så bruger du jo bare delay() :)
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