W tym artykule zobaczymy, jak wykorzystać różne metody JQuery do generowania animacji.
hide() I show()Metoda hide() po prostu ustawia styl w wierszu display: none dla wybranych pozycji. I odwrotnie, metoda show() przywraca właściwości wyświetlania.
Zobaczmy przykład:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>W pierwszym przypadku akapit jest ukryty po kliknięciu przycisku (hide-btn), w drugim przypadku akapit jest pokazywany po kliknięciu przycisku (show-btn).
Możesz także określić parametr czasu trwania, aby animować efekt pokazywania i ukrywania przez określony czas.
Czasy trwania można określić za pomocą jednego z łańcuchów poprzedzającychdefinoc 'slow' o 'fast'lub w liczbie milisekund, dla większej dokładności; wyższe wartości wskazują na wolniejsze animacje.
<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>Ciąg przeddefinita 'fast' wskazuje czas trwania 200 milisekund, podczas gdy string 'slow' wskazuje czas trwania 600 milisekund.
Możemy określić funkcję callback do wykonania po zakończeniu metody show() lub dell ' 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>Metoda jQuery toggle() pokazywać lub ukrywać elementy w taki sposób, że jeśli element jest początkowo wyświetlany, zostanie ukryty; i odwrotnie, jeśli jest ukryty, zostanie wyświetlony (praktycznie przełącza jego widoczność).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Podobnie możesz określić parametr duration dla metody toggle(), w taki sposób, aby animować przejście między widocznymi i ukrytymi metodami 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>Podobnie możesz również określić funkcję callback dla metody 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()Możesz użyć metod jQuery fadeIn()e fadeOut() aby pokazać lub ukryć elementy HTML, stopniowo zwiększając lub zmniejszając ich krycie i tworząc efekt blaknięcia.
<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>Podobnie jak inne metody efektów jQuery, możesz opcjonalnie określić parametr czasu trwania lub szybkości dla metod fadeIn()e fadeOut(), aby kontrolować czas trwania zanikania. Czasy trwania można określić za pomocą jednego z łańcuchów poprzedzającychdefinoc 'slow' o 'fast'lub w liczbie milisekund; wyższe wartości wskazują na wolniejsze animacje.
<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>efekt metod fadeIn() / fadeOut() jest podobny do show() / hide(), ale w przeciwieństwie do metod show() / hide(), te pierwsze animują tylko krycie elementów docelowych i nie animują ich rozmiaru.
Możesz także określić funkcję callback uruchomić po zakończeniu metod 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()Metoda jQuery fadeToggle() wyświetla lub ukrywa wybrane elementy, animując ich krycie, tak że jeśli element jest początkowo wyświetlany, zostanie wyblakły; jeśli był ukryty, zniknie (tj. przełączy efekt zanikania).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Można również określić parametr czasu życia metody fadeToggle() co do metod fadeIn() / fadeOut(), aby sterować czasem trwania lub szybkością animacji zanikania.
<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>Metoda fadeToggle() ma również możliwość określenia funkcji 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()Metoda jQuery fadeTo() jest podobny do metody fadeIn(), ale w przeciwieństwie do metody fadeIn(), metoda fadeTo() umożliwia mieszanie elementów do określonego poziomu krycia.
$(selector).fadeTo(speed, opacity, callback);Wymagany parametr opacity określa ostateczne krycie elementów docelowych, które może być liczbą z przedziału od 0 do 1. Parametr duration o speed jest to również wymagane dla tej metody, która określa czas trwania zanikania animacji.
<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()Metoda jQuery slideUp() e slideDown() służą do ukrywania lub pokazywania elementów HTML poprzez stopniowe zmniejszanie lub zwiększanie ich wysokości (tj. przewijanie ich w górę lub w dół).
<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>Podobnie jak inne metody efektów jQuery, możesz opcjonalnie określić parametr czasu trwania lub szybkości dla metod slideUp() e slideDown() , aby kontrolować czas trwania animacji slajdu. Czasy trwania można określić za pomocą jednego z łańcuchów poprzedzającychdefinoc 'slow' o 'fast'lub w liczbie milisekund; wyższe wartości wskazują na wolniejsze animacje.
<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>Możesz także określić funkcję wywołania zwrotnego do wykonania po zakończeniu metody 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()Metoda jQuery slideToggle() pokaż lub ukryj wybrane elementy, animując ich wysokość, tak aby element, który jest początkowo wyświetlany, został przewinięty w górę; jeśli jest ukryty, zostanie przewinięty w dół, tj. przełącza między metodami slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Podobnie możesz określić parametr czasu życia dla metody slideToggle() jak 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>Podobnie możesz również określić funkcję wywołania zwrotnego dla metody 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()Metoda jQuery animate() służy do tworzenia niestandardowych animacji. Metoda animate() służy do animowania numerycznych właściwości CSS, takich jak width, height, margin, padding, opacity, top, left itp. ale właściwości nieliczbowe, takie jak color o background-color nie można ich animować przy użyciu podstawowych funkcji jQuery.
Podstawowa składnia metody animate() jest następujący:
$(selector).animate({ properties }, duration, callback);Parametry metody animate() mają następujące znaczenia:
'slow' o 'fast'lub w liczbie milisekund; wyższe wartości wskazują na wolniejsze animacje.Poniżej znajduje się prosty przykład metody animate() który animuje obraz z jego pierwotnej pozycji w prawo o 300 pikseli po kliknięciu przycisku.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Możesz także animować wiele właściwości elementu jednocześnie, używając tej metody animate(). Wszystkie właściwości były animowane w tym samym czasie bez żadnych opóźnień.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Możesz także animować wiele właściwości elementu pojedynczo, w kolejce za pomocą funkcji konkatenacji jQuery.
Poniższy przykład przedstawia animację jQuery w kolejce lub łańcuchu, w której każda animacja rozpocznie się po zakończeniu poprzedniej animacji elementu. Funkcję konkatenacji zobaczymy w kolejnym artykule.
<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>Jest to również możliwe defizakończ wartości względne dla animowanych właściwości. Jeśli wartość jest określona z prefiksem += o -=, wartość docelowa jest obliczana przez dodanie lub odjęcie określonej liczby od bieżącej wartości właściwości.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Oprócz wartości liczbowych każda właściwość może akceptować ciągi znaków 'show', 'hide' e 'toggle'. Będzie to bardzo przydatne w sytuacji, gdy chcesz po prostu animować właściwość z jej aktualnej wartości do wartości początkowej i odwrotnie.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Metoda jQuery stop() służy do zatrzymania aktualnie uruchomionych animacji lub efektów jQuery na wybranych elementach przed zakończeniem.
Podstawowa składnia metody stop() jQuery można podać za pomocą:
$(selector).stop(stopAll, goToEnd);Parametry w powyższej składni mają następujące znaczenie:
false, oznacza to, że zatrzymana zostanie tylko bieżąca animacja, pozostałe animacje w kolejce zostaną wykonane później.false.Oto prosty przykład demonstrujący tę metodę stop() w prawdziwej akcji, w której możesz rozpocząć i zatrzymać animację po kliknięciu przycisku.
<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>Oto kolejny przykład tej metody, gdy ponownie klikniesz przyciskSlide Toggle” po rozpoczęciu animacji, ale przed jej zakończeniem, animacja natychmiast rozpocznie się w kierunku przeciwnym do zapisanego punktu początkowego.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Podczas tworzenia animowanego efektu zawisu, jednym z najczęstszych problemów, jakie możesz napotkać, jest wiele animacji ustawionych w kolejce, gdy szybko umieszczasz i usuwasz kursor myszy. Dlaczego w tej sytuacji mouseenter gli mouseleave zdarzenia są uruchamiane szybko przed zakończeniem animacji. Aby uniknąć tego problemu i stworzyć ładny i płynny efekt zawisu, możesz dodać stop(true, true)do łańcucha metod, tak:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Instrukcje JavaScript są wykonywane linia po linii. Ponieważ jednak efekt jQuery zajmuje trochę czasu, kod następnego wiersza może działać, gdy poprzedni efekt jest nadal uruchomiony. Aby temu zapobiec, jQuery zapewnia funkcję wywołania zwrotnego dla każdej metody efektu.
Funkcja wywołania zwrotnego to funkcja, która jest uruchamiana po zakończeniu efektu. Funkcja wywołania zwrotnego jest przekazywana jako argument do metod efektu i zwykle pojawiają się one jako ostatni argument metody. Na przykład podstawowa składnia metody efektu jQuery slideToggle() z funkcją wywołania zwrotnego, którą można określić w następujący sposób:
$(selector).slideToggle(duration, callback);Rozważmy następujący przykład, w którym umieściliśmy instrukcje slideToggle()e alert()jeden obok drugiego. Jeśli spróbujesz tego kodu, alert pojawi się natychmiast po kliknięciu przycisku przełączania, bez czekania na zakończenie efektu przełączania slajdów.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>A oto zmodyfikowana wersja poprzedniego przykładu, w którym wstawiliśmy instrukcję alert() wewnątrz funkcji wywołania zwrotnego dla metody slideToggle(). Jeśli spróbujesz tego kodu, komunikat ostrzegawczy pojawi się po zakończeniu efektu przełączania slajdów.
<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>Podobnie możesz defizakończ funkcje wywołania zwrotnego dla innych metod efektów jQuery, takich jak show(), hide(), fadeIn(), fadeOut(), animate()Itp..
<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>Jeśli wypróbujesz powyższy przykładowy kod, otrzymasz dwa razy ten sam komunikat ostrzegawczy dla każdego elementu <h1> e <p>, po kliknięciu przycisku aktywacji.
BlogInnovazione.it
Coveware by Veeam będzie w dalszym ciągu świadczyć usługi reagowania na incydenty związane z wyłudzeniami cybernetycznymi. Coveware będzie oferować funkcje kryminalistyczne i naprawcze…
Konserwacja predykcyjna rewolucjonizuje sektor naftowo-gazowy dzięki innowacyjnemu i proaktywnemu podejściu do zarządzania zakładami.…
Brytyjskie CMA wydało ostrzeżenie dotyczące zachowań Big Tech na rynku sztucznej inteligencji. Tam…
Rozporządzenie w sprawie zielonych domów, opracowane przez Unię Europejską w celu zwiększenia efektywności energetycznej budynków, zakończyło proces legislacyjny…