Šiame straipsnyje pamatysime, kaip naudoti skirtingus JQuery metodus animacijai generuoti.
hide() Ir show()Hide() metodas tiesiog nustato stilių į eilutę display: none pasirinktoms prekėms. Ir atvirkščiai, metodas show() atkuria rodymo savybes.
Pažiūrėkime pavyzdį:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Pirmuoju atveju pastraipa paslepiama spustelėjus mygtuką (hide-btn), antruoju atveju pastraipa rodoma paspaudus mygtuką (show-btn).
Taip pat galite nurodyti trukmės parametrą, kad animuotų pasirodymą ir paslėptumėte efektą tam tikrą laiką.
Trukmes galima nurodyti naudojant vieną iš išankstinių eilučiųdefiNite 'slow' o 'fast', arba per kelias milisekundes, kad būtų didesnis tikslumas; didesnės reikšmės rodo lėtesnę animaciją.
<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>Styga priešdefinita 'fast' nurodo 200 milisekundžių trukmę, o eilutė 'slow' nurodo 600 milisekundžių trukmę.
Galime nurodyti funkciją callback kuris turi būti įvykdytas užbaigus metodą show() arba 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>jQuery metodas toggle() rodyti arba slėpti elementus taip, kad jei elementas iš pradžių rodomas, jis būtų paslėptas; ir atvirkščiai, jei paslėptas, jis bus rodomas (praktiškai perjungia jo matomumą).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Panašiai galite nurodyti parametrą duration už metodą toggle(), tokiu būdu, kad būtų pagyvintas perėjimas tarp matomų ir paslėptų, panašių metodų 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>Taip pat galite nurodyti funkciją callback už metodą 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>fadeIn() e fadeOut()Galite naudoti jQuery metodus fadeIn()e fadeOut() rodyti arba paslėpti HTML elementus, palaipsniui didinant arba mažinant jų neskaidrumą ir sukuriant blukimo efektą.
<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>Kaip ir kiti jQuery efektų metodai, pasirinktinai galite nurodyti metodų trukmę arba greičio parametrą fadeIn()e fadeOut(), kad būtų galima kontroliuoti išblukimo trukmę. Trukmes galima nurodyti naudojant vieną iš išankstinių eilučiųdefiNite 'slow' o 'fast', arba per keletą milisekundžių; didesnės reikšmės rodo lėtesnę animaciją.
<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>metodų poveikį fadeIn() / fadeOut() Jis panašus į show() / hide(), bet skirtingai nei metodai show() / hide(), pirmieji tik suaktyvina tikslinių elementų neskaidrumą, o ne animuoja jų dydį.
Taip pat galite nurodyti funkciją callback paleisti užbaigus metodus 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>fadeToggle()jQuery metodas fadeToggle() rodo arba slepia pasirinktus elementus, suaktyvindamas jų neskaidrumą, kad jei elementas būtų rodomas iš pradžių, jis būtų išblukęs; jei jis buvo paslėptas, jis išnyks (t. y. perjungs išblukimo efektą).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Taip pat galite nurodyti metodo veikimo trukmės parametrą fadeToggle() kalbant apie metodus fadeIn() / fadeOut(), norėdami valdyti išnykimo animacijos trukmę arba greitį.
<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>FadeToggle() metodas taip pat turi galimybę nurodyti funkciją 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>fadeTo()jQuery metodas fadeTo() tai panašu į metodą fadeIn(), bet skirtingai nei metodas fadeIn(), metodas fadeTo() leidžia sulieti elementus iki tam tikro nepermatomumo lygio.
$(selector).fadeTo(speed, opacity, callback);Reikalingas parametras opacity nurodo galutinį tikslinių elementų neskaidrumą, kuris gali būti skaičius nuo 0 iki 1. Parametras duration o speed jis taip pat reikalingas šiam metodui, kuris nurodo animacijos išnykimo trukmę.
<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>slideUp() e slideDown()jQuery metodas slideUp() e slideDown() jie naudojami HTML elementams paslėpti arba rodyti palaipsniui mažinant arba didinant jų aukštį (t. y. slenkant aukštyn arba žemyn).
<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>Kaip ir kiti jQuery efektų metodai, pasirinktinai galite nurodyti metodų trukmę arba greičio parametrą slideUp() e slideDown() norėdami valdyti skaidrių animacijos trukmę. Trukmes galima nurodyti naudojant vieną iš išankstinių eilučiųdefiNite 'slow' o 'fast', arba per keletą milisekundžių; didesnės reikšmės rodo lėtesnę animaciją.
<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>Taip pat galite nurodyti atgalinio skambinimo funkciją, kuri bus vykdoma užbaigus metodą slideUp() o 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>slideToggle()jQuery metodas slideToggle() rodyti arba slėpti pasirinktus elementus animuojant jų aukštį, kad, jei elementas iš pradžių rodomas, jis būtų slinktas aukštyn; jei paslėptas, jis bus slinktas žemyn, t. y. perjungiamas tarp metodų slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Taip pat galite nurodyti metodo veikimo trukmės parametrą slideToggle() kaip slideUp() e slideDown().
<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>Taip pat galite nurodyti metodo atgalinio skambinimo funkciją 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>animate()jQuery metodas animate() jis naudojamas kuriant pasirinktines animacijas. Metodas animate() yra naudojamas animuoti skaitines CSS savybes, pvz width, height, margin, padding, opacity, top, left ir tt bet neskaitinės savybės kaip color o background-color jų negalima animuoti naudojant pagrindines jQuery funkcijas.
Pagrindinė metodo sintaksė animate() tai štai kas:
$(selector).animate({ properties }, duration, callback);Metodo parametrai animate() turi šias reikšmes:
'slow' o 'fast', arba per keletą milisekundžių; didesnės reikšmės rodo lėtesnę animaciją.Žemiau pateikiamas paprastas metodo pavyzdys animate() kuri animuoja vaizdą iš pradinės padėties į dešinę 300 pikselių paspaudus mygtuką.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Be to, naudodami šį metodą, vienu metu galite animuoti kelias elemento savybes animate(). Visos savybės buvo animuotos tuo pačiu metu be jokio delsimo.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Taip pat galite animuoti kelias elemento savybes po vieną eilėje naudodami jQuery sujungimo funkciją.
Toliau pateiktame pavyzdyje rodoma eilėje arba grandinėje suskirstyta jQuery animacija, kur kiekviena animacija prasidės, kai baigsis ankstesnė elemento animacija. Sujungimo funkciją pamatysime kitame straipsnyje.
<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>Taip pat įmanoma definish santykinės animuotų savybių reikšmės. Jei reikšmė nurodyta su priešdėliu += o -=, tikslinė vertė apskaičiuojama pridedant arba atimant nurodytą skaičių iš esamos turto vertės.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Be skaitinių reikšmių, kiekviena ypatybė gali priimti eilutes 'show', 'hide' e 'toggle'. Tai bus labai naudinga situacijoje, kai norite tiesiog pagyvinti turtą nuo dabartinės vertės iki pradinės vertės ir atvirkščiai.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery metodas stop() naudojamas norint sustabdyti šiuo metu vykdomą jQuery animaciją arba efektus pasirinktuose elementuose prieš baigiant.
Pagrindinė metodo sintaksė stop() jQuery gali būti pateikta su:
$(selector).stop(stopAll, goToEnd);Aukščiau pateiktos sintaksės parametrai turi šias reikšmes:
false, tai reiškia, kad bus sustabdyta tik dabartinė animacija, likusios eilėje esančios animacijos bus vykdomos vėliau.false.Čia yra paprastas pavyzdys, parodantis metodą stop() realiame veiksme, kur galite pradėti ir sustabdyti animaciją spustelėję mygtuką.
<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>Štai dar vienas šio metodo pavyzdys, kai dar kartą spustelėsite mygtukąSlide Toggle“ pradėjus animaciją, bet jai nepasibaigus, animacija iškart prasidės priešinga kryptimi nei išsaugotas pradžios taškas.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Kuriant animacinį pelės žymeklio efektą, viena iš dažniausiai pasitaikančių problemų, su kuriomis galite susidurti, yra keletas animacijų, esančių eilėje, kai greitai uždedate ir pašalinate pelės žymeklį. Kodėl šioje situacijoje mouseenter gli mouseleave įvykiai suaktyvinami greitai prieš pasibaigiant animacijai. Norėdami išvengti šios problemos ir sukurti gražų ir sklandų slydimo efektą, galite pridėti stop(true, true)į metodų grandinę, pavyzdžiui:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>„JavaScript“ teiginiai vykdomi eilutė po eilutės. Tačiau kadangi „jQuery“ efektas baigiasi šiek tiek laiko, kitos eilutės kodas gali būti paleistas, kol vis dar veikia ankstesnis efektas. Kad taip nenutiktų, jQuery kiekvienam efekto metodui suteikia atgalinio skambinimo funkciją.
Atšaukimo funkcija yra funkcija, kuri paleidžiama pasibaigus efektui. Atšaukimo funkcija perduodama kaip argumentas efekto metodams ir paprastai jie rodomi kaip paskutinis metodo argumentas. Pavyzdžiui, pagrindinė jQuery efekto metodo sintaksė slideToggle() su atgalinio ryšio funkcija, kurią galima nurodyti taip:
$(selector).slideToggle(duration, callback);Apsvarstykite šį pavyzdį, kuriame pateikiame teiginius slideToggle()e alert()vienas šalia kito. Jei išbandysite šį kodą, perspėjimas pasirodys iš karto spustelėjus perjungimo mygtuką, nelaukiant, kol bus baigtas slydimo perjungimo efektas.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Ir čia yra modifikuota ankstesnio pavyzdžio versija, kurioje įterpėme teiginį alert() metodo atgalinio skambinimo funkcijos viduje slideToggle(). Jei bandysite šį kodą, įspėjamasis pranešimas pasirodys, kai bus baigtas slydimo perjungimo efektas.
<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>Taip pat galite defiužbaigti kitų „jQuery“ efektų metodų, pvz., iškvietimo funkcijų show(), hide(), fadeIn(), fadeOut(), animate(), kt.
<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>Jei išbandysite anksčiau pateiktą pavyzdinį kodą, tą patį įspėjimo pranešimą gausite du kartus kiekvienai prekei <h1> e <p>, spustelėjus aktyvinimo mygtuką.
BlogInnovazione.it
Lavindami smulkiosios motorikos įgūdžius dažydami, vaikai paruošiami sudėtingesniems įgūdžiams, pavyzdžiui, rašymui. Norėdami nuspalvinti…
Karinio jūrų laivyno sektorius yra tikra pasaulinė ekonominė galia, kuri pasiekė 150 mlrd.
Praėjusį pirmadienį „Financial Times“ paskelbė apie susitarimą su „OpenAI“. FT licencijuoja savo pasaulinio lygio žurnalistiką…
Milijonai žmonių moka už srautinio perdavimo paslaugas, mokėdami mėnesinius abonentinius mokesčius. Paplitusi nuomonė, kad jūs…