tovar

JQuery, ako môžeme implementovať dynamické efekty pomocou JQuery

Pomocou JQuery môžete vytvárať dynamické efekty, animácie a vyblednutia pôsobením na prvky stránky HTML.

V tomto článku uvidíme, ako používať rôzne metódy JQuery na generovanie animácií.

Skryť a zobraziť prvok HTML

metódy hide() A show()

Metóda hide() jednoducho nastaví štýl inline display: none pre vybrané položky. Naopak, metóda show() obnovuje vlastnosti zobrazenia. 

Pozrime sa na príklad:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

V prvom prípade sa odsek po kliknutí na tlačidlo (hide-btn), v druhom prípade sa odsek zobrazí po kliknutí na tlačidlo (show-btn).

Môžete tiež zadať parameter trvania, aby ste animovali efekt zobrazenia a skrytia na určitý čas.

Trvanie je možné špecifikovať pomocou jedného z pred reťazcovdefinoc 'slow''fast'alebo v počte milisekúnd, pre väčšiu presnosť; vyššie hodnoty znamenajú pomalšie animácie.

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

Struna predefiNita 'fast' označuje trvanie 200 milisekúnd, zatiaľ čo reťazec 'slow' označuje trvanie 600 milisekúnd.

Môžeme špecifikovať funkciu callback vykonať po dokončení metódy show() alebo hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>
Prepínacia metóda

Metóda jQuery toggle() zobraziť alebo skryť položky takým spôsobom, že ak je položka pôvodne zobrazená, bude skrytá; naopak ak je skrytý, zobrazí sa (prakticky prepína jeho viditeľnosť).

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

Podobne môžete zadať parameter duration pre metódu toggle(), takým spôsobom, aby sa animoval prechod medzi viditeľnými a skrytými podobnými metódami show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

Podobne môžete zadať aj funkciu callback pre metódu toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

Efekty miznutia jQuery

metódy fadeIn()fadeOut()

Môžete použiť metódy jQuery fadeIn()fadeOut() zobraziť alebo skryť prvky HTML, postupne zvyšovať alebo znižovať ich nepriehľadnosť a vytvárať efekt miznutia.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Rovnako ako iné metódy efektov jQuery, môžete pre metódy voliteľne zadať parameter trvania alebo rýchlosti fadeIn()fadeOut(), aby ste mohli kontrolovať trvanie slabnutia. Trvanie je možné špecifikovať pomocou jedného z pred reťazcovdefinoc 'slow''fast'alebo za niekoľko milisekúnd; vyššie hodnoty znamenajú pomalšie animácie.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

účinok metód fadeIn()fadeOut() Je to podobné ako show()hide(), ale na rozdiel od metód show()hide(), prvé animujú iba nepriehľadnosť cieľových prvkov a neanimujú ich veľkosť.

Môžete tiež určiť funkciu callback spustiť po dokončení metód fadeIn()fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>
metóda fadeToggle()

Metóda jQuery fadeToggle() zobrazí alebo skryje vybrané prvky animáciou ich nepriehľadnosti tak, že ak je prvok zobrazený na začiatku, bude vyblednutý; ak bol skrytý, zmizne (t. j. prepne efekt miznutia).

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Môžete tiež zadať parameter životnosti pre metódu fadeToggle() čo sa týka metód fadeIn()fadeOut(), na ovládanie trvania alebo rýchlosti animácie slabnutia.

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

Metóda fadeToggle() má tiež schopnosť špecifikovať funkciu callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>
metóda fadeTo()

Metóda jQuery fadeTo() je to podobné ako pri metóde fadeIn(), ale na rozdiel od metódy fadeIn(), metóda fadeTo() umožňuje prelínať prvky až na určitú úroveň nepriehľadnosti.

$(selector).fadeTo(speed, opacity, callback);

Požadovaný parameter opacity určuje konečnú nepriehľadnosť cieľových prvkov, ktorá môže byť číslom od 0 do 1. Parameter duration o speed je to potrebné aj pre túto metódu, ktorá špecifikuje trvanie zoslabenia animácie.

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

Efekty posúvania

metódy slideUp()slideDown()

Metóda jQuery slideUp()slideDown() sa používajú na skrytie alebo zobrazenie prvkov HTML postupným znižovaním alebo zvyšovaním ich výšky (t. j. posúvaním nahor alebo nadol).

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

Rovnako ako iné metódy efektov jQuery, môžete pre metódy voliteľne zadať parameter trvania alebo rýchlosti slideUp()slideDown() na ovládanie trvania animácie snímky. Trvanie je možné špecifikovať pomocou jedného z pred reťazcovdefinoc 'slow''fast'alebo za niekoľko milisekúnd; vyššie hodnoty znamenajú pomalšie animácie.

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

Môžete tiež zadať funkciu spätného volania, ktorá sa má vykonať po dokončení metódy slideUp()slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>
metóda slideToggle()

Metóda jQuery slideToggle() zobraziť alebo skryť vybrané prvky animáciou ich výšky, takže ak je prvok zobrazený na začiatku, bude rolovaný nahor; ak je skrytý, posunie sa nadol, t.j. prepína medzi metódami slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Podobne môžete zadať parameter životnosti pre metódu slideToggle() Prísť slideUp()slideDown().

Inovačný bulletin
Nenechajte si ujsť najdôležitejšie novinky o inováciách. Prihláste sa na ich odber e-mailom.
<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

Podobne môžete pre metódu zadať aj funkciu spätného volania slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

Animačné efekty

metóda animate()

Metóda jQuery animate() používa sa na vytváranie vlastných animácií. Metóda animate() slúži na animáciu numerických CSS vlastností, ako napr width, height, margin, padding, opacity, top, left atď. ale nečíselné vlastnosti ako colorbackground-color nemožno ich animovať pomocou základnej funkcionality jQuery.

Základná syntax metódy animate() je to nasledovné:

$(selector).animate({ properties }, duration, callback);

Parametre metódy animate() majú nasledujúce významy:

  • Požadovaný parameter vlastností defidokončite animáciu vlastností CSS.
  • Voliteľný parameter trvania určuje, ako dlho bude animácia bežať. Trvanie je možné špecifikovať pomocou jedného z pred reťazcovdefinoc 'slow''fast'alebo za niekoľko milisekúnd; vyššie hodnoty znamenajú pomalšie animácie.
  • Voliteľný parameter spätného volania je funkcia, ktorá sa má zavolať po dokončení animácie.

Nižšie je uvedený jednoduchý príklad metódy animate() ktorý po kliknutí na tlačidlo oživí obrázok z jeho pôvodnej polohy doprava o 300 pixelov.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Pomocou tejto metódy môžete tiež animovať viacero vlastností prvku naraz animate(). Všetky vlastnosti boli animované v rovnakom čase bez akéhokoľvek oneskorenia.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Pomocou funkcie zreťazenia jQuery môžete animovať viacero vlastností prvku jednu po druhej jednotlivo vo fronte.

Nasledujúci príklad ukazuje animáciu jQuery zaradenú do frontu alebo zreťazenú, pričom každá animácia sa spustí po dokončení predchádzajúcej animácie na prvku. Funkciu zreťazenia uvidíme v budúcom článku.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

Je to tiež možné defirelatívne hodnoty animovaných vlastností. Ak je hodnota zadaná s predponou += o -=, cieľová hodnota sa vypočíta pripočítaním alebo odčítaním zadaného čísla od aktuálnej hodnoty nehnuteľnosti.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Okrem číselných hodnôt môže každá vlastnosť akceptovať reťazce 'show''hide''toggle'. Bude to veľmi užitočné v situácii, keď chcete nehnuteľnosť len animovať z jej aktuálnej hodnoty na počiatočnú hodnotu a naopak.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>
metóda stop()

Metóda jQuery stop() sa používa na zastavenie aktuálne spustených animácií alebo efektov jQuery na vybraných prvkoch pred dokončením.

Základná syntax metódy stop() jQuery je možné zadať pomocou:

$(selector).stop(stopAll, goToEnd);

Parametre vo vyššie uvedenej syntaxi majú nasledujúci význam:

  • Il voliteľný parameter boolean stopAll, určuje, či sa má alebo nemá odstrániť animácia vo fronte. Predefinite je false, to znamená, že sa zastaví iba aktuálna animácia, ostatné animácie vo fronte sa spustia neskôr.
  • Booleovský parameter goToEnd voliteľné určuje, či sa má aktuálna animácia dokončiť okamžite. Predefinite je false.

Tu je jednoduchý príklad demonštrujúci metódu stop() v reálnej akcii, kde môžete spustiť a zastaviť animáciu kliknutím na tlačidlo.

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

Tu je ďalší príklad tejto metódy, keď znova kliknete na tlačidloSlide Toggle” po spustení animácie, ale pred jej dokončením sa animácia okamžite spustí v opačnom smere od uloženého počiatočného bodu.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Pri vytváraní animovaného efektu vznášania sa jedným z najbežnejších problémov, s ktorými sa môžete stretnúť, je viacero animácií v rade, keď rýchlo umiestnite a odstránite kurzor myši. Prečo v tejto situácii mouseenter Gli mouseleave udalosti sa spúšťajú rýchlo pred dokončením animácie. Aby ste sa vyhli tomuto problému a vytvorili pekný a hladký efekt vznášania, môžete pridať stop(true, true)do reťazca metód, takto:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

Spätné volanie

Príkazy JavaScript sa vykonávajú riadok po riadku. Keďže však dokončenie efektu jQuery nejaký čas trvá, kód ďalšieho riadku môže bežať, kým predchádzajúci efekt stále beží. Aby sa tomu zabránilo, jQuery poskytuje funkciu spätného volania pre každú metódu efektu.

Funkcia spätného volania je funkcia, ktorá sa spustí po dokončení efektu. Funkcia spätného volania sa odovzdáva ako argument metódam efektu a zvyčajne sa zobrazuje ako posledný argument metódy. Napríklad základná syntax efektovej metódy jQuery slideToggle() s funkciou spätného volania, ktorá môže byť špecifikovaná takto:

$(selector).slideToggle(duration, callback);

Uvažujme o nasledujúcom príklade, kde sme umiestnili výroky slideToggle()alert()jeden vedľa druhého. Ak vyskúšate tento kód, upozornenie sa zobrazí ihneď po kliknutí na prepínač bez čakania na dokončenie efektu prepínania.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

A tu je upravená verzia predchádzajúceho príkladu, kde sme vložili príkaz alert() vnútri funkcie spätného volania pre metódu slideToggle(). Ak vyskúšate tento kód, po dokončení efektu prepínania snímky sa zobrazí varovná správa.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Rovnako tak môžete defidokončiť funkcie spätného volania pre ostatné metódy efektu jQuery, ako napr show(), hide(), fadeIn()fadeOut()animate(), atď.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Ak vyskúšate vzorový kód uvedený vyššie, dostanete rovnakú varovnú správu dvakrát raz na položku <h1><p>, po kliknutí na tlačidlo aktivovať.

BlogInnovazione.it

Inovačný bulletin
Nenechajte si ujsť najdôležitejšie novinky o inováciách. Prihláste sa na ich odber e-mailom.
Tagy: jQuery

Nedávne články

Smart Lock Market: zverejnená správa o prieskume trhu

Pojem Smart Lock Market sa vzťahuje na priemysel a ekosystém obklopujúci výrobu, distribúciu a používanie…

27 marca 2024

Čo sú dizajnové vzory: prečo ich používať, klasifikácia, klady a zápory

V softvérovom inžinierstve sú návrhové vzory optimálnym riešením problémov, ktoré sa bežne vyskytujú pri návrhu softvéru. Som ako…

26 marca 2024

Technologický vývoj priemyselného značenia

Priemyselné značenie je široký pojem, ktorý zahŕňa niekoľko techník používaných na vytváranie trvalých značiek na povrchu…

25 marca 2024

Príklady makier programu Excel napísaných pomocou jazyka VBA

Nasledujúce jednoduché príklady makier programu Excel boli napísané pomocou odhadovaného času čítania VBA: 3 minúty Príklad…

25 marca 2024