Avancerede toggle- og slide-effekter
Bliv fortrolig med avancerede anvendelser af .slideToggle(), .fadeToggle() og .animate() til at skabe glidende, responsive og visuelt tiltalende vis/skjul- og overgangseffekter.
Avancerede toggle- og slide-effekter er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 3 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 3 lektioner i alt.
Velkommen til avancerede skift!
I denne lektion går vi i dybden med jQuerys effektive metoder til at skabe dynamiske vis/skjul-effekter. Du lærer at bruge .slideToggle(), .fadeToggle() og .animate() til tilpassede overgange.
Disse teknikker er afgørende, når du bygger interaktive og visuelt indbydende brugergrænseflader.
Skydende elementer med slideToggle()
Metoden .slideToggle() animerer højden på de matchede elementer, så de skyder op eller ned. Hvis et element er synligt, skyder det op for at skjule sig. Hvis det er skjult, skyder det ned for at blive vist.
Den er perfekt til sammenklappelige menuer eller indholdssektioner, der kan foldes ud. Prøv at køre dette eksempel:
// HTML for context:
// <button id="toggleButton">Toggle Panel</button>
// <div id="myPanel" style="background-color: lightblue; padding: 10px;">
// <p>This is a sliding panel!</p>
// </div>
$(document).ready(function() {
$("#toggleButton").click(function() {
$("#myPanel").slideToggle();
});
});Tilpasning af slideToggle()
Du kan styre hastigheden på animationen med .slideToggle() ved at angive en varighed (millisekunder eller 'slow', 'fast'). Du kan også angive en callbackfunktion, der skal køres, når animationen er færdig.
.slideToggle(duration).slideToggle(duration, callback)
Eksperimentér med hastigheden i koden nedenfor:
// HTML for context:
// <button id="speedToggleBtn">Toggle Fast</button>
// <p id="speedPanel" style="background-color: #e0ffe0; padding: 10px;">
// I slide fast and then alert!
// </p>
$(document).ready(function() {
$("#speedToggleBtn").click(function() {
$("#speedPanel").slideToggle("fast", function() {
alert("Animation finished!");
});
});
});Udtoning af elementer med fadeToggle()
Ligesom .slideToggle() viser eller skjuler metoden .fadeToggle() de matchede elementer ved at animere deres gennemsigtighed. Hvis et element er synligt, tones det ud. Hvis det er skjult, tones det ind.
Det skaber en jævn overgangseffekt med gennemsigtighed. Se den i aktion:
// HTML for context:
// <button id="fadeToggleBtn">Toggle Fade</button>
// <div id="fadePanel" style="background-color: #ffe0e0; padding: 10px;">
// <p>This panel fades in and out!</p>
// </div>
$(document).ready(function() {
$("#fadeToggleBtn").click(function() {
$("#fadePanel").fadeToggle();
});
});Tilpasning af fadeToggle()
Ligesom med .slideToggle() kan du tilpasse hastigheden og tilføje en callbackfunktion til .fadeToggle(). Det giver dig mulighed for at kæde handlinger sammen eller udføre opgaver, når udtoningen er færdig.
.fadeToggle(duration).fadeToggle(duration, callback)
Se den langsomme udtoning og farveændringen:
// HTML for context:
// <button id="customFadeBtn">Toggle Custom Fade</button>
// <p id="customFadePanel" style="background-color: #e0e0ff; padding: 10px;">
// I fade slowly and change color!
// </p>
$(document).ready(function() {
$("#customFadeBtn").click(function() {
$("#customFadePanel").fadeToggle(1000, function() {
$(this).css("color", "purple");
});
});
});Kombination af skyde- og udtoningseffekter
Du kan kombinere .slideToggle() og .fadeToggle() for at skabe mere komplekse effekter. Du kan for eksempel få et element til at skyde ned, mens det tones ind, eller omvendt.
Når de kaldes sekventielt, anvender de deres effekter efter hinanden. Hvis effekterne virkelig skal foregå samtidigt, er .animate() ofte et bedre valg (det ser vi på nu!).
// HTML for context:
// <button id="mixedToggleBtn">Toggle Mixed</button>
// <div id="mixedPanel" style="background-color: #ffffe0; padding: 10px;">
// <p>I will slide and fade!</p>
// </div>
$(document).ready(function() {
$("#mixedToggleBtn").click(function() {
$("#mixedPanel").slideToggle(500);
$("#mixedPanel").fadeToggle(500);
});
});Enkelt skift med animation
Kan du huske den grundlæggende metode .toggle()? Den viser eller skjuler ganske enkelt et element. Den kan dog også acceptere parametre for varighed og callbackfunktion, ligesom .slideToggle() og .fadeToggle().
Når .toggle() bruges med animationsparametre, bliver den som standard reelt til .fadeToggle().
// HTML for context:
// <button id="simpleToggleBtn">Toggle with Animation</button>
// <p id="simpleTogglePanel" style="background-color: #f0f0f0; padding: 10px;">
// I toggle with a default fade effect.
// </p>
$(document).ready(function() {
$("#simpleToggleBtn").click(function() {
$("#simpleTogglePanel").toggle("slow", function() {
console.log("Toggle animation done!");
});
});
});Udformning af tilpassede skifteffekter
Hvis du vil have fuld kontrol, skal du bruge metoden .animate(). Du kan animere næsten enhver CSS-egenskab numerisk. For at skabe tilpassede skifteffekter kan du animere egenskaber som height, opacity eller endda left/top.
Det afgørende er at animere til en bestemt værdi eller bruge det særlige nøgleord 'toggle' til egenskaber som height eller width.
// HTML for context:
// <button id="customAnimateBtn">Custom Animate Toggle</button>
// <div id="customAnimatePanel" style="background-color: lightgreen; padding: 10px; height: 100px; overflow: hidden;">
// <p>I animate my height to toggle!</p>
// </div>
$(document).ready(function() {
$("#customAnimateBtn").click(function() {
$("#customAnimatePanel").animate({
height: 'toggle' // Animates height to 'toggle' (show/hide)
}, 500);
});
});Samtidige tilpassede animationer
.animate() er især nyttig, når du skal ændre flere CSS-egenskaber på én gang for at skabe en kombineret skifteffekt. Du kan animere height og opacity samtidigt for at opnå en skyde- og udtoningseffekt.
Husk at håndtere egenskaben display, hvis elementet helt skal forsvinde fra layoutet, efter at gennemsigtigheden er animeret til 0.
// HTML for context:
// <button id="combinedAnimateBtn">Combined Toggle</button>
// <div id="combinedAnimatePanel" style="background-color: lightcoral; padding: 10px; height: 100px; opacity: 1; overflow: hidden;">
// <p>I slide AND fade!</p>
// </div>
$(document).ready(function() {
$("#combinedAnimateBtn").click(function() {
var panel = $("#combinedAnimatePanel");
if (panel.is(":visible")) {
panel.animate({
height: '0px',
opacity: '0'
}, 500, function() {
$(this).hide(); // Ensure display: none after animation
});
} else {
panel.show().animate({ // Show first, then animate
height: '100px',
opacity: '1'
}, 500);
}
});
});Test din viden om skift
Hvilke af følgende jQuery-metoder kan bruges til at skabe en animeret vis/skjul-effekt på et element?
Opsummering af skift og animation
Godt klaret! Du har mestret avancerede jQuery-teknikker til dynamiske vis/skjul-effekter.
- Vi undersøgte
.slideToggle()til lodrette skydeeffekter. - Vi brugte
.fadeToggle()til jævne overgange i gennemsigtighed. - Vi så, hvordan
.toggle()også kan animere. - Vigtigst af alt lærte du at bruge
.animate()til helt tilpassede og kombinerede skifteffekter, som giver detaljeret kontrol over flere CSS-egenskaber.
Bliv ved med at øve dig, så du kan bygge imponerende interaktive brugergrænseflader!
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Avancerede toggle- og slide-effekter” gratis?
Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Avancerede toggle- og slide-effekter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Avancerede toggle- og slide-effekter”?
Bliv fortrolig med avancerede anvendelser af .slideToggle(), .fadeToggle() og .animate() til at skabe glidende, responsive og visuelt tiltalende vis/skjul- og overgangseffekter. Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på jQuery Academy?
Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 3.
Hvor lang tid tager lektionen “Avancerede toggle- og slide-effekter”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne jQuery Academy-lektion?
Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Kædning og køsætning af animationer
- Brugerdefineret easing og animation-callbacks
- Avancerede toggle- og slide-effekter