Бұл мақалада біз анимацияларды жасау үшін әртүрлі 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>Бұл мүмкін 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()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
Veeam ұсынған Coveware кибербопсалау оқиғаларына жауап беру қызметтерін көрсетуді жалғастырады. Coveware криминалистикалық және қалпына келтіру мүмкіндіктерін ұсынады ...
Болжалды техникалық қызмет көрсету зауытты басқаруға инновациялық және белсенді көзқараспен мұнай және газ секторында төңкеріс жасайды.…
Ұлыбританияның CMA жасанды интеллект нарығындағы Big Tech әрекеті туралы ескерту жасады. Ана жерде…
Ғимараттардың энергия тиімділігін арттыру үшін Еуропалық Одақ тұжырымдаған «Жасыл үйлер» жарлығы өзінің заң шығару процесін аяқтады ...