jQuery Academy · Lektion

Avancerade växlings- och glideffekter

Bemästra avancerade användningsområden för .slideToggle(), .fadeToggle() och .animate() för att skapa smidiga, responsiva och visuellt tilltalande visnings-, döljnings- och övergångseffekter.

Lektion 3 av 311 steg

Avancerade växlings- och glideffekter är en gratis lektion i jQuery Academy på CoddyKit. Detta är lektion 3 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för jQuery Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i jQuery Academy innehåller totalt 3 lektioner.

Välkomna till avancerade växlingsfunktioner!

I den här lektionen går vi djupare in på jQuerys kraftfulla metoder för att skapa dynamiska visa- och dölj-effekter. Ni lär er behärska .slideToggle(), .fadeToggle() och hur ni använder .animate() för anpassade övergångar.

Dessa tekniker är viktiga för att bygga interaktiva och visuellt tilltalande användargränssnitt.

Skjuta element med slideToggle()

Metoden .slideToggle() animerar höjden på matchade element, så att de skjuts upp eller ned. Om ett element visas skjuts det upp för att döljas. Om det är dolt skjuts det ned för att visas.

Den passar perfekt för hopfällbara menyer eller innehållssektioner som kan fällas ut. Prova att köra det här exemplet:

// 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();
  });
});

Anpassa slideToggle()

Ni kan styra hastigheten för animeringen med .slideToggle() genom att ange en varaktighet (millisekunder eller 'slow', 'fast'). Ni kan också ange en callback-funktion som ska köras när animationen är klar.

.slideToggle(duration)
.slideToggle(duration, callback)

Experimentera med hastigheten i koden nedan:

// 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!");
    });
  });
});

Tona element med fadeToggle()

I likhet med .slideToggle() visar eller döljer metoden .fadeToggle() matchade element genom att animera deras opacitet. Om ett element visas tonas det bort. Om det är dolt tonas det fram.

Detta skapar en mjuk övergångseffekt med transparens. Se den i praktiken:

// 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();
  });
});

Anpassa fadeToggle()

Precis som med .slideToggle() kan ni anpassa hastigheten och lägga till en callback-funktion i .fadeToggle(). Det gör att ni kan kedja åtgärder eller utföra uppgifter när toningen är klar.

.fadeToggle(duration)
.fadeToggle(duration, callback)

Observera den långsamma toningen och färgä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");
    });
  });
});

Kombinera slide och fade

Ni kan kombinera .slideToggle() och .fadeToggle() för mer komplexa effekter. Ni kanske till exempel vill att ett element ska skjutas ned samtidigt som det tonas fram, eller tvärtom.

När de anropas sekventiellt tillämpas effekterna efter varandra. För verkligt samtidiga effekter är .animate() ofta att föredra (det ser vi härnäst!).

// 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);
  });
});

Enkel växling med animation

Kommer ni ihåg den grundläggande metoden .toggle()? Den visar eller döljer helt enkelt ett element. Den kan dock också ta emot parametrar för varaktighet och callback, precis som .slideToggle() och .fadeToggle().

När .toggle() används med animationsparametrar fungerar den som standard i praktiken som .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!");
    });
  });
});

Skapa anpassade växlingseffekter

För maximal kontroll använder ni metoden .animate(). Ni kan animera nästan alla numeriska CSS-egenskaper. För att skapa anpassade växlingseffekter kan ni animera egenskaper som height, opacity eller till och med left/top.

Nyckeln är att animera till ett specifikt värde eller använda det särskilda nyckelordet 'toggle' för egenskaper 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);
  });
});

Samtidiga anpassade animationer

.animate() är särskilt användbar när ni behöver ändra flera CSS-egenskaper samtidigt för att skapa en kombinerad växlingseffekt. Ni kan animera height och opacity samtidigt för att skapa en skjut- och toningseffekt.

Kom ihåg att hantera egenskapen display om ni vill att elementet ska försvinna helt ur layouten efter att opaciteten har animerats till 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);
    }
  });
});

Testa era kunskaper om växlingseffekter

Vilka av följande jQuery-metoder kan användas för att skapa en animerad visa- och dölj-effekt på ett element?

Besvara frågan i den interaktiva lektionen

Sammanfattning av Toggle och Animate

Bra jobbat! Ni har lärt er avancerade jQuery-tekniker för dynamiska visa- och dölj-effekter.

Vi utforskade .slideToggle() för vertikal förflyttning.
Vi använde .fadeToggle() för mjuka opacitetsövergångar.
Vi såg hur .toggle() också kan animera.
Framför allt lärde ni er att använda .animate() för helt anpassade och kombinerade växlingseffekter, vilket ger detaljerad kontroll över flera CSS-egenskaper.

Fortsätt öva för att bygga imponerande interaktiva användargränssnitt!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Avancerade växlings- och glideffekter” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen jQuery Academy, inklusive ”Avancerade växlings- och glideffekter”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i jQuery Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Avancerade växlings- och glideffekter”?

Bemästra avancerade användningsområden för .slideToggle(), .fadeToggle() och .animate() för att skapa smidiga, responsiva och visuellt tilltalande visnings-, döljnings- och övergångseffekter. Ni övar på jQuery Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig jQuery Academy?

Du behöver inga förkunskaper. Utbildningen i jQuery Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.

Hur lång tid tar lektionen ”Avancerade växlings- och glideffekter”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här jQuery Academy-lektionen?

Ja. Varje jQuery Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till jQuery Academy