Bu yazıda animasiya yaratmaq üçün müxtəlif JQuery üsullarından necə istifadə edəcəyimizi görəcəyik.
hide() Və show()hide() metodu sadəcə üslubu daxili təyin edir display: none seçilmiş maddələr üçün. Əksinə, show() metodu ekran xüsusiyyətlərini bərpa edir.
Bir nümunəyə baxaq:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Birinci halda, düyməni basdığınız zaman paraqraf gizlənir (hide-btn), ikinci halda, düyməni basdığınız zaman paraqraf göstərilir (show-btn).
Siz həmçinin bir müddət ərzində şounu canlandırmaq və effekti gizlətmək üçün müddət parametrini təyin edə bilərsiniz.
Müddətlər əvvəlcədən sətirlərdən birini istifadə edərək təyin edilə bilərdefinite 'slow' o 'fast', və ya daha çox dəqiqlik üçün bir neçə millisaniyədə; yüksək dəyərlər daha yavaş animasiyaları göstərir.
<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>Simli əvvəlcədəndefinita 'fast' sətir isə 200 millisaniyəlik müddəti göstərir 'slow' 600 millisaniyəlik müddəti göstərir.
funksiyasını təyin edə bilərik callback metod tamamlandıqdan sonra yerinə yetirilməlidir show() və ya 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 metodu toggle() elementləri elə göstərmək və ya gizlətmək ki, əgər element əvvəlcə göstərilibsə, o, gizlənsin; əksinə, gizlədilibsə, o, göstəriləcək (praktiki olaraq görünmə qabiliyyətini dəyişdirir).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Eynilə, parametri təyin edə bilərsiniz duration üsul üçün toggle(), üsullar kimi görünən və gizli arasında keçidi canlandıracaq şəkildə 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>Eynilə, funksiyanı da təyin edə bilərsiniz callback üsul üçün 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()Siz jQuery metodlarından istifadə edə bilərsiniz fadeIn()e fadeOut() HTML elementlərini göstərmək və ya gizlətmək, onların qeyri-şəffaflığını tədricən artırmaq və ya azaltmaq və solma effekti yaratmaq.
<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>Digər jQuery effektləri metodları kimi, siz isteğe bağlı olaraq üsullar üçün müddət və ya sürət parametrini təyin edə bilərsiniz fadeIn()e fadeOut(), solma müddətinə nəzarət etmək üçün. Müddətlər əvvəlcədən sətirlərdən birini istifadə edərək təyin edilə bilərdefinite 'slow' o 'fast', və ya bir neçə millisaniyədə; yüksək dəyərlər daha yavaş animasiyaları göstərir.
<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>üsulların təsiri fadeIn() / fadeOut() O, oxşardır show() / hide(), lakin üsullardan fərqli olaraq show() / hide(), birincisi yalnız hədəf elementlərin qeyri-şəffaflığını canlandırır və onların ölçüsünü canlandırmır.
Siz həmçinin funksiyasını təyin edə bilərsiniz callback üsullar tamamlandıqdan sonra işə salın 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 metodu fadeToggle() seçilmiş elementləri qeyri-şəffaflığını canlandırmaq yolu ilə göstərir və ya gizlədir ki, element ilkin olaraq göstərilsə, o, sönür; gizlədilibsə, sönəcək (yəni solğun effekti dəyişdirin).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Siz həmçinin metod üçün ömür boyu parametrini təyin edə bilərsiniz fadeToggle() üsullara gəldikdə fadeIn() / fadeOut(), solğun animasiyanın müddətini və ya sürətini idarə etmək üçün.
<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() metodu da funksiya təyin etmək imkanına malikdir 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 metodu fadeTo() üsula bənzəyir fadeIn(), lakin metoddan fərqli olaraq fadeIn(), üsul fadeTo() elementləri müəyyən qeyri-şəffaflıq səviyyəsinə qədər qarışdırmağa imkan verir.
$(selector).fadeTo(speed, opacity, callback);Tələb olunan parametr opacity 0 və 1 arasında rəqəm ola bilən hədəf elementlərin son qeyri-şəffaflığını müəyyən edir. Parametr duration o speed animasiyanın solma müddətini təyin edən bu üsul üçün də tələb olunur.
<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 metodu slideUp() e slideDown() onlar hündürlüyünü tədricən azaltmaqla və ya artırmaqla (yəni onları yuxarı və ya aşağı sürüşdürməklə) HTML elementlərini gizlətmək və ya göstərmək üçün istifadə olunur.
<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>Digər jQuery effektləri metodları kimi, siz isteğe bağlı olaraq üsullar üçün müddət və ya sürət parametrini təyin edə bilərsiniz slideUp() e slideDown() slayd animasiyasının müddətini idarə etmək üçün. Müddətlər əvvəlcədən sətirlərdən birini istifadə edərək təyin edilə bilərdefinite 'slow' o 'fast', və ya bir neçə millisaniyədə; yüksək dəyərlər daha yavaş animasiyaları göstərir.
<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>Siz həmçinin metod tamamlandıqdan sonra yerinə yetirmək üçün geri çağırış funksiyasını təyin edə bilərsiniz 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 metodu slideToggle() seçilmiş elementləri hündürlüyünü canlandırmaqla göstərmək və ya gizlətmək, belə ki, element ilkin olaraq göstərilsə, yuxarı sürüşdürülsün; gizlidirsə, o, aşağı sürüşdürüləcək, yəni üsullar arasında keçid edəcək slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Eynilə, siz metodun ömrü parametrini təyin edə bilərsiniz slideToggle() gəl 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>Eynilə, siz metod üçün geri çağırış funksiyasını da təyin edə bilərsiniz 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 metodu animate() xüsusi animasiyalar yaratmaq üçün istifadə olunur. Metod animate() kimi rəqəmli CSS xüsusiyyətlərini canlandırmaq üçün istifadə olunur width, height, margin, padding, opacity, top, left və s. kimi qeyri-ədəd xassələri color o background-color əsas jQuery funksionallığından istifadə edərək onları canlandırmaq olmaz.
Metodun əsas sintaksisi animate() bu aşağıdakılardır:
$(selector).animate({ properties }, duration, callback);Metod parametrləri animate() aşağıdakı mənalara malikdir:
'slow' o 'fast', və ya bir neçə millisaniyədə; yüksək dəyərlər daha yavaş animasiyaları göstərir.Aşağıda metodun sadə bir nümunəsi verilmişdir animate() düyməni kliklədikdə şəkli orijinal yerindən sağa 300 piksel animasiya edir.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Siz həmçinin metoddan istifadə edərək bir elementin birdən çox xassələrini eyni anda canlandıra bilərsiniz animate(). Bütün xüsusiyyətlər eyni vaxtda heç bir gecikmə olmadan canlandırıldı.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Siz həmçinin jQuery-nin birləşmə funksiyasından istifadə edərək növbədə bir elementin çoxsaylı xassələrini tək-tək canlandıra bilərsiniz.
Aşağıdakı nümunə növbəli və ya zəncirlənmiş jQuery animasiyasını göstərir, burada hər bir animasiya elementdəki əvvəlki animasiya tamamlandıqdan sonra başlayacaq. Gələcək məqalədə birləşmə funksiyasını görəcəyik.
<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>Bu da mümkündür deficizgi xassələri üçün nisbi dəyərlər. Əgər dəyər prefikslə göstərilibsə += o -=, hədəf dəyəri əmlakın cari dəyərinə göstərilən ədədi əlavə etmək və ya çıxmaqla hesablanır.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Rəqəmsal dəyərlərə əlavə olaraq, hər bir xüsusiyyət sətirləri qəbul edə bilər 'show', 'hide' e 'toggle'. Yalnız əmlakı cari dəyərindən ilkin dəyərinə və əksinə canlandırmaq istədiyiniz bir vəziyyətdə çox faydalı olacaq.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery metodu stop() jQuery animasiyalarını və ya seçilmiş elementlər üzərində effektləri tamamlanmamışdan əvvəl dayandırmaq üçün istifadə olunur.
Metodun əsas sintaksisi stop() jQuery ilə verilə bilər:
$(selector).stop(stopAll, goToEnd);Yuxarıdakı sintaksisdəki parametrlər aşağıdakı mənalara malikdir:
false, bu o deməkdir ki, yalnız cari animasiya dayandırılacaq, növbədə qalan animasiyalar daha sonra yerinə yetiriləcək.false.Bu metodu nümayiş etdirən sadə bir nümunədir stop() düyməni basmaqla animasiyanı başlaya və dayandıra biləcəyiniz real fəaliyyətdə.
<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>Düyməni yenidən klikləsəniz, bu metodun başqa bir nümunəsidirSlide Toggle” animasiyasını başlatdıqdan sonra, lakin başa çatmamış animasiya dərhal saxlanmış başlanğıc nöqtəsindən əks istiqamətdə başlayacaq.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Animasiyalı hover effekti yaradarkən qarşılaşa biləcəyiniz ən ümumi problemlərdən biri siçan kursorunu cəld yerləşdirib çıxardığınız zaman növbəyə qoyulmuş çoxsaylı animasiyalardır. Niyə bu vəziyyətdə mouseenter gli mouseleave animasiya tamamlanmazdan əvvəl hadisələr sürətlə işə salınır. Bu problemin qarşısını almaq və gözəl və hamar hover effekti yaratmaq üçün əlavə edə bilərsiniz stop(true, true)metod zəncirinə, belə ki:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript ifadələri sətir-sətir icra olunur. Bununla belə, jQuery effektinin tamamlanması bir qədər vaxt tələb etdiyindən, növbəti sətrin kodu əvvəlki effekt hələ də işləyərkən işləyə bilər. Bunun qarşısını almaq üçün jQuery hər effekt metodu üçün geri çağırış funksiyası təmin edir.
Geri çağırış funksiyası effekt tamamlandıqdan sonra işləyən funksiyadır. Geri çağırış funksiyası effektin metodlarına arqument kimi ötürülür və onlar adətən sonuncu metod arqumenti kimi görünür. Məsələn, jQuery effekti metodunun əsas sintaksisi slideToggle() aşağıdakı kimi təyin edilə bilən geri çağırış funksiyası ilə:
$(selector).slideToggle(duration, callback);İfadələri yerləşdirdiyimiz aşağıdakı nümunəyə nəzər salın slideToggle()e alert()biri digərinin yanında. Bu kodu sınasanız, sürüşdürmə dəyişdirmə effektinin tamamlanmasını gözləmədən, keçid düyməsini kliklədikdən dərhal sonra xəbərdarlıq görünəcək.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Və burada ifadəni daxil etdiyimiz əvvəlki nümunənin dəyişdirilmiş versiyası alert() metod üçün geri çağırış funksiyası daxilində slideToggle(). Bu kodu sınasanız, slayd keçid effekti tamamlandıqdan sonra xəbərdarlıq mesajı görünəcək.
<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>Eynilə, edə bilərsiniz defikimi digər jQuery effekti üsulları üçün geri çağırış funksiyalarını tamamlayın show(), hide(), fadeIn(), fadeOut(), animate()və s.
<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>Yuxarıdakı nümunə kodunu sınasanız, hər bir element üçün iki dəfə eyni xəbərdarlıq mesajı alacaqsınız <h1> e <p>, aktivləşdir düyməsini kliklədikdən sonra.
BlogInnovazione.it
Kataniya poliklinikasında Apple Vision Pro kommersiya görüntüləyicisi ilə oftalmoplastika əməliyyatı həyata keçirilib...
Rəngləmə yolu ilə incə motor bacarıqlarının inkişafı uşaqları yazı kimi daha mürəkkəb bacarıqlara hazırlayır. Rəngləmək üçün…
Dəniz sektoru 150 milyardlıq bazara doğru irəliləyən əsl qlobal iqtisadi gücdür...
Keçən bazar ertəsi Financial Times OpenAI ilə müqavilə elan etdi. FT dünya səviyyəli jurnalistikasına lisenziya verir...