У гэтым артыкуле мы паглядзім, як выкарыстоўваць розныя метады JQuery для стварэння анімацыі.
hide() І show()Метад hide() проста ўсталёўвае стыль у радку display: none для выбраных элементаў. І наадварот, метад show() аднаўляе ўласцівасці адлюстравання.
Давайце паглядзім прыклад:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>У першым выпадку абзац хаваецца пры націску на кнопку (hide-btn), у другім выпадку абзац паказваецца пры націску на кнопку (show-btn).
Вы таксама можаце задаць параметр працягласці, каб анімаваць эфект паказу і схавання на пэўны перыяд часу.
Працягласць можна задаць з дапамогай аднаго з папярэдніх радкоўdefiніта 'slow' o 'fast', або ў колькасці мілісекунд, для большай дакладнасці; больш высокія значэнні паказваюць больш павольную анімацыю.
<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>Радок прэdefiНіта 'fast' паказвае працягласць 200 мілісекунд, у той час як радок 'slow' паказвае працягласць 600 мілісекунд.
Мы можам задаць функцыю callback для выканання пасля завяршэння метаду show() ці ' 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 toggle() паказваць або хаваць элементы такім чынам, што калі элемент першапачаткова адлюстроўваецца, ён будзе схаваны; наадварот, калі схаваны, ён будзе адлюстроўвацца (практычна пераключае яго бачнасць).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Аналагічным чынам можна задаць параметр duration за метад toggle(), такім чынам, каб ажывіць пераход паміж бачным і схаваным, як метады 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>Падобным чынам вы таксама можаце задаць функцыю callback за метад 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()Вы можаце выкарыстоўваць метады jQuery fadeIn()e fadeOut() каб паказаць або схаваць элементы HTML, паступова павялічваючы або памяншаючы іх непразрыстасць і ствараючы эфект знікнення.
<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>Як і для іншых метадаў эфектаў jQuery, вы можаце па жаданні ўказаць параметр працягласці або хуткасці для метадаў fadeIn()e fadeOut(), каб кантраляваць працягласць замірання. Працягласць можна задаць з дапамогай аднаго з папярэдніх радкоўdefiніта 'slow' o 'fast', або ў колькасці мілісекунд; больш высокія значэнні паказваюць больш павольную анімацыю.
<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>эфект метадаў fadeIn() / fadeOut() Гэта падобна на show() / hide(), але ў адрозненне ад метадаў show() / hide(), першыя толькі анімуюць непразрыстасць мэтавых элементаў і не анімуюць іх памер.
Таксама вы можаце задаць функцыю callback для запуску пасля завяршэння метадаў 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 fadeToggle() адлюстроўвае або хавае выбраныя элементы шляхам анімацыі іх непразрыстасці так, што калі элемент першапачаткова адлюстроўваецца, ён будзе знікаць; калі ён быў схаваны, ён будзе знікаць (г.зн. пераключыць эфект знікнення).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Вы таксама можаце задаць параметр часу жыцця для метаду fadeToggle() што тычыцца метадаў fadeIn() / fadeOut(), каб кантраляваць працягласць або хуткасць знікнення анімацыі.
<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() таксама мае магчымасць задаць функцыю 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 fadeTo() гэта падобна на метад fadeIn(), але ў адрозненне ад метаду fadeIn(), метад fadeTo() дазваляе змешваць элементы да пэўнага ўзроўню непразрыстасці.
$(selector).fadeTo(speed, opacity, callback);Патрабаваны параметр opacity задае канчатковую непразрыстасць мэтавых элементаў, якая можа быць лікам ад 0 да 1. Параметр duration o speed гэта таксама патрабуецца для гэтага метаду, які вызначае працягласць знікнення анімацыі.
<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 slideUp() e slideDown() яны выкарыстоўваюцца, каб схаваць або паказаць элементы HTML, паступова памяншаючы або павялічваючы іх вышыню (г.зн. пракручваючы іх уверх ці ўніз).
<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>Як і для іншых метадаў эфектаў jQuery, вы можаце па жаданні ўказаць параметр працягласці або хуткасці для метадаў slideUp() e slideDown() для кантролю працягласці анімацыі слайдаў. Працягласць можна задаць з дапамогай аднаго з папярэдніх радкоўdefiніта 'slow' o 'fast', або ў колькасці мілісекунд; больш высокія значэнні паказваюць больш павольную анімацыю.
<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>Вы таксама можаце задаць функцыю зваротнага выкліку для выканання пасля завяршэння метаду 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 slideToggle() паказваць або хаваць выбраныя элементы, анімуючы іх вышыню, так што калі элемент першапачаткова адлюстроўваецца, ён будзе пракручвацца ўверх; калі схаваны, ён будзе пракручвацца ўніз, г.зн. пераключацца паміж метадамі slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Падобным чынам вы можаце задаць параметр часу жыцця для метаду slideToggle() Прыходзіць 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>Аналагічным чынам вы таксама можаце вызначыць функцыю зваротнага выкліку для метаду 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 animate() ён выкарыстоўваецца для стварэння карыстальніцкай анімацыі. Метад animate() выкарыстоўваецца для анімацыі лікавых уласцівасцяў CSS, такіх як width, height, margin, padding, opacity, top, left г.д. але такія нелікавыя ўласцівасці, як color o background-color яны не могуць быць анімаваныя з дапамогай базавай функцыянальнасці jQuery.
Асноўны сінтаксіс метаду animate() гэта наступнае:
$(selector).animate({ properties }, duration, callback);Параметры метаду animate() маюць наступныя значэнні:
'slow' o 'fast', або ў колькасці мілісекунд; больш высокія значэнні паказваюць больш павольную анімацыю.Ніжэй прыведзены просты прыклад метаду animate() які ажыўляе малюнак з першапачатковага становішча ўправа на 300 пікселяў пры націску кнопкі.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Вы таксама можаце адначасова анімаваць некалькі уласцівасцей элемента, выкарыстоўваючы гэты метад animate(). Усе ўласцівасці былі аніміраваныя адначасова без затрымкі.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Вы таксама можаце анімаваць некалькі уласцівасцей элемента паасобку ў чарзе з дапамогай функцыі аб'яднання jQuery.
У наступным прыкладзе паказана анімацыя jQuery у чарзе або ў ланцужку, дзе кожная анімацыя будзе запускацца пасля завяршэння папярэдняй анімацыі элемента. Мы ўбачым функцыю канкатэнацыі ў наступным артыкуле.
<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>Гэта таксама магчыма definish адносныя значэнні для анімаваных уласцівасцяў. Калі значэнне вызначана з прэфіксам += o -=, мэтавае значэнне вылічваецца шляхам дадання або аднімання зададзенага ліку ад бягучага значэння ўласцівасці.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>У дадатак да лікавых значэнняў кожная ўласцівасць можа прымаць радкі 'show', 'hide' e 'toggle'. Гэта будзе вельмі карысна ў сітуацыі, калі вы проста хочаце ажывіць ўласцівасць ад яго бягучага значэння да пачатковага значэння і наадварот.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Метад jQuery stop() выкарыстоўваецца для спынення бягучай анімацыі jQuery або эфектаў на выбраных элементах да завяршэння.
Асноўны сінтаксіс метаду stop() jQuery можа быць зададзены з:
$(selector).stop(stopAll, goToEnd);Параметры ў прыведзеным вышэй сінтаксісе маюць наступныя значэнні:
false, гэта азначае, што толькі бягучая анімацыя будзе спынена, астатнія анімацыі ў чарзе будуць выкананы пазней.false.Вось просты прыклад, які дэманструе метад stop() у рэальным дзеянні, дзе вы можаце запускаць і спыняць анімацыю пры націску кнопкі.
<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>Вось яшчэ адзін прыклад гэтага метаду, калі вы зноў націснеце кнопкуSlide Toggle» пасля запуску анімацыі, але да яе завяршэння, анімацыя неадкладна пачнецца ў процілеглым кірунку ад захаванай пачатковай кропкі.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Пры стварэнні аніміраванага эфекту навядзення адна з самых частых праблем, з якой вы можаце сутыкнуцца, - гэта некалькі анімацый, якія стаяць у чарзе, калі вы хутка размяшчаеце і выдаляеце курсор мышы. Чаму ў гэтай сітуацыі, mouseenter глі mouseleave падзеі запускаюцца хутка да завяршэння анімацыі. Каб пазбегнуць гэтай праблемы і стварыць прыгожы і плаўны эфект навядзення, вы можаце дадаць stop(true, true)да ланцужка метадаў, напрыклад:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Аператары JavaScript выконваюцца радок за радком. Аднак, паколькі для завяршэння эфекту jQuery патрабуецца некаторы час, код наступнага радка можа працаваць, пакуль яшчэ працуе папярэдні эфект. Каб гэтага не адбылося, jQuery забяспечвае функцыю зваротнага выкліку для кожнага метаду эфекту.
Функцыя зваротнага выкліку - гэта функцыя, якая запускаецца пасля завяршэння эфекту. Функцыя зваротнага выкліку перадаецца як аргумент метадам эфекту, і яны звычайна з'яўляюцца апошнім аргументам метаду. Напрыклад, асноўны сінтаксіс метаду эфекту jQuery slideToggle() з функцыяй зваротнага выкліку, якая можа быць вызначана наступным чынам:
$(selector).slideToggle(duration, callback);Разгледзім наступны прыклад, дзе мы размясцілі заявы slideToggle()e alert()адзін каля аднаго. Калі вы паспрабуеце гэты код, папярэджанне з'явіцца адразу пасля націску кнопкі пераключэння, не чакаючы завяршэння эфекту пераключэння слайдаў.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>А вось мадыфікаваная версія папярэдняга прыкладу, куды мы ўставілі аператар alert() ўнутры функцыі зваротнага выкліку для метаду slideToggle(). Калі вы паспрабуеце гэты код, пасля завяршэння эфекту пераключэння слайдаў з'явіцца паведамленне з папярэджаннем.
<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>Сапраўды гэтак жа можна defiзавяршыць функцыі зваротнага выкліку для іншых метадаў эфектаў jQuery, такіх як show(), hide(), fadeIn(), fadeOut(), animate()і г.д.
<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>Калі вы паспрабуеце ўзор кода вышэй, вы атрымаеце адно і тое ж паведамленне з папярэджаннем двойчы для кожнага элемента <h1> e <p>, пасля націску на кнопку актывацыі.
BlogInnovazione.it
CMA Вялікабрытаніі выпусціла папярэджанне аб паводзінах Big Tech на рынку штучнага інтэлекту. Там…
Указ «Зялёныя дамы», распрацаваны Еўрапейскім саюзам для павышэння энергаэфектыўнасці будынкаў, завяршыў свой заканадаўчы працэс з...
Прадстаўлена гадавая справаздача Casaleggio Associati аб электроннай камерцыі ў Італіі. Справаздача пад назвай «AI-Commerce: рубяжы электроннай камерцыі са штучным інтэлектам».…
Вынік пастаянных тэхналагічных інавацый і прыхільнасці да навакольнага асяроддзя і дабрабыту людзей. Bandalux прадстаўляе Airpure®, палатку…