У овом чланку ћемо видети како да користимо различите ЈКуери методе за генерисање анимација.
hide() И show()Метод хиде() једноставно поставља стил на линији display: none за изабране ставке. Супротно томе, метода схов() враћа својства приказа.
Хајде да видимо пример:
<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>Метода јКуери 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()Можете користити јКуери методе fadeIn()e fadeOut() да прикажете или сакријете ХТМЛ елементе, постепено повећавајући или смањујући њихову непрозирност и стварајући ефекат бледења.
<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>Као и друге методе јКуери ефеката, опционо можете одредити параметар трајања или брзине за методе 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()Метода јКуери 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>Метода фадеТоггле() такође има могућност да специфицира функцију 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()Метода јКуери 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()Метода јКуери slideUp() e slideDown() користе се за сакривање или приказивање ХТМЛ елемената постепеним смањењем или повећањем њихове висине (тј. померањем нагоре или надоле).
<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>Као и друге методе јКуери ефеката, опционо можете одредити параметар трајања или брзине за методе 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()Метода јКуери 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()Метода јКуери animate() користи се за креирање прилагођених анимација. Метода animate() се користи за анимирање нумеричких ЦСС својстава, као нпр width, height, margin, padding, opacity, top, left итд. али ненумеричка својства попут color o background-color не могу се анимирати користећи основну јКуери функционалност.
Основна синтакса методе 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>Такође можете анимирати вишеструка својства елемента једно по једно појединачно, у реду користећи јКуери функцију спајања.
Следећи пример показује јКуери анимацију у реду чекања или уланчану, где ће свака анимација почети када се претходна анимација на елементу заврши. Видећемо функцију конкатенације у наредном чланку.
<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>Такође је могуће defiниже релативне вредности за анимирана својства. Ако је вредност наведена са префиксом += 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()Метода јКуери stop() се користи за заустављање тренутно покренутих јКуери анимација или ефеката на изабраним елементима пре завршетка.
Основна синтакса методе stop() јКуери се може дати са:
$(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>ЈаваСцрипт изрази се извршавају ред по ред. Међутим, пошто је јКуери ефекту потребно неко време да се заврши, код следећег реда се може покренути док претходни ефекат још увек ради. Да би се то спречило, јКуери обезбеђује функцију повратног позива за сваки метод ефекта.
Функција повратног позива је функција која се покреће када је ефекат завршен. Функција повратног позива се прослеђује као аргумент методама ефекта и оне се обично појављују као последњи аргумент методе. На пример, основна синтакса методе јКуери ефекта 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заврши функције повратног позива за друге методе јКуери ефекта, као што су 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
Предиктивно одржавање револуционише сектор нафте и гаса, са иновативним и проактивним приступом управљању постројењима.…
УК ЦМА је издао упозорење о понашању Биг Тецх-а на тржишту вештачке интелигенције. Тамо…
Уредба „Цасе Греен“, коју је формулисала Европска унија за побољшање енергетске ефикасности зграда, завршила је свој законодавни процес са…
Представљен годишњи извештај Цасалеггио Ассоциати-а о е-трговини у Италији. Извештај под насловом „АИ-Цоммерце: границе е-трговине са вештачком интелигенцијом“.…