Forum Mjukvara Programmering och digitalt skapande Tråd

jQuery - Lägga till en klass "under en tid" / med "toning"?

1
Skriv svar
Permalänk
Medlem
●

jQuery - Lägga till en klass "under en tid" / med "toning"?

Jag har suttit och försökt och försökt med jQuery men får det inte riktigt att fungera.

Hur ska jag göra för att vid hover på .box kunna använda toggleClass men med "animering" eller under en viss tid. Jag vill helt enkelt få en hovereffekt men inte en "direkt" utan att den tonar in. Jag vill lägga till klassen .hover som är border:2px solid black;
Det kanske inte är toggleClass som jag ska använda mig av ens?

Hoppas ni förstår hur jag menar!

//Andreas

Visa signatur

//Andreas Olsson

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

För att tona ett element använder du fadeIn/-Out alt. fadeTo(). Detta påverkar dock hela elementet och inte enbart ramen, vilket verkar vara ditt mål..

I vilket fall är det inte .toggleClass() du ska använda dig av då detta är likvärdigt med att lägga till class="whatever" direkt i HTML-koden. Ett element har antingen klassen eller inte, det finns inga mellanstadier (och sålunda inget läge där elementet har en halvtransparent border)

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för förklaringen!
Tror jag förklarade lite luddigt.
Det jag helt enkelt vill göra är att få en hovereffekt på min div. Men den ska inte vara hover direkt, utan "tonas" fram. Förklarar jag mig tillräckligt?

Skrivet av Teknocide:

För att tona ett element använder du fadeIn/-Out alt. fadeTo(). Detta påverkar dock hela elementet och inte enbart ramen, vilket verkar vara ditt mål..

I vilket fall är det inte .toggleClass() du ska använda dig av då detta är likvärdigt med att lägga till class="whatever" direkt i HTML-koden. Ett element har antingen klassen eller inte, det finns inga mellanstadier (och sålunda inget läge där elementet har en halvtransparent border)

Gå till inlägget
Visa signatur

//Andreas Olsson

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av noname.olsson:

Tack för förklaringen!
Tror jag förklarade lite luddigt.
Det jag helt enkelt vill göra är att få en hovereffekt på min div. Men den ska inte vara hover direkt, utan "tonas" fram. Förklarar jag mig tillräckligt?

Gå till inlägget

Jo jag förstår, men om du slänger på en klass så sker övergången på en gång. Det finns inget css-attribut för "tona in långsamt över 2000 millisekunder". Det du behöver göra är som sagt att använda fadeIn/fadeOut.

edit: för att förtydliga, säg att du har två klasser; .show och .hide:

.show {
   opacity:1.0;
}

.hide {
   opacity:0.1;
}

Om du använder jQuery för att sätta .show på ett element så får den effekt direkt. Det går liksom inte att sätta en hundradel av klass .show på ett element.

Det som händer när du sätter en fadeIn() är att jQuery knyter en timer till ett eller flera element, och varje gång timern tickar så ökas opaciteten ett snäpp. De CSS-värden som ändras skrivs direkt i elementets style-attribut.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Man kan fortfarande animera saker med addClass() fast då är det inte själva javascriptet som animerar. Men man får använda sig av CSS transitions t.ex:

.addThisClass {
border: 5px solid black;
-webkit-transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-o-transition: border 1s ease-in-out;
transition: border 1s ease-in-out;
}

jQuery;
$('element').addClass('addThisClass');

Detta kommer att animera en tjockare border på elementet. Googla CSS transitions för mer info.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara