Efekty jQuery

  • Poprzednia strona
  • Następna strona

jQuery może tworzyć efekty ukrywania, wyświetlania, przełączania, ślizgania oraz niestandardowych animacji.

Spróbuj sam

Spróbuj tego efektu jQuery:

CodeW3C.com - wiodąca strona z lekcjami technologii Web

Na CodeW3C.com znajdziesz wszystkie potrzebne lekcje tworzenia stron internetowych.

Kliknij tutaj

Przykład

jQuery hide()
Pokazanie prostego funkcji jQuery hide().
jQuery hide()
Kolejny przykład hide(). Jak ukryć część tekstu.
jQuery slideToggle()
Pokazanie prostego efektu panelu przesuwania jQuery.
jQuery fadeTo()
Pokazanie prostego przykładu funkcji jQuery fadeTo().
jQuery animate()
Pokazanie prostego przykładu funkcji jQuery animate().

Ukrywanie i wyświetlanie jQuery

Przez funkcje hide() i show(), jQuery obsługuje ukrywanie i wyświetlanie elementów HTML:

Przykład

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

Spróbuj sam

Funkcje hide() i show() mogą być ustawione na dwa opcjonalne parametry: speed i callback.

Gramatyka:

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed Parametr określa szybkość wyświetlania lub ukrywania. Można ustawić te wartości: "slow", "fast", "normal" lub w milisekundach.

callback Parametr to nazwa funkcji, która jest wykonywana po zakończeniu działania funkcji hide lub show. Będziesz się uczyć więcej o tym w poniższych rozdziałach tego przewodnika callback Zrozumienie parametrów.

Przykład

$("button").click(function(){
$("p").hide(1000);
});

Spróbuj sam

Przełączanie jQuery

Funkcja jQuery toggle() używa funkcji show() lub hide() do przełączania stanu widoczności HTML elementów.

Ukrywa wyświetlane elementy i wyświetla ukryte elementy.

Gramatyka:

$(selector).toggle(speed,callback)

speed Parametr może przyjąć te wartości: "slow", "fast", "normal" lub milisekundy.

Przykład

$("button").click(function(){
$("p").toggle();
});

Spróbuj sam

callback Parametr to nazwa funkcji, która jest wykonywana po zakończeniu działania tej funkcji. Będziesz się uczyć więcej o tym w poniższych rozdziałach tego przewodnika. callback Zrozumienie parametrów.

Funkcje przesuwania jQuery - slideDown, slideUp, slideToggle

jQuery ma następujące funkcje przesuwania:

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed Parametr może przyjąć te wartości: "slow", "fast", "normal" lub milisekundy.

callback Parametr to nazwa funkcji, która jest wykonywana po zakończeniu działania tej funkcji. Będziesz się uczyć więcej o tym w poniższych rozdziałach tego przewodnika. callback Zrozumienie parametrów.

Przykład użycia slideDown()

$(".flip").click(function(){
$(".panel").slideDown();
});

Spróbuj sam

Przykład użycia slideUp()

$(".flip").click(function(){
$(".panel").slideUp();
});

Spróbuj sam

Przykład użycia slideToggle()

$(".flip").click(function(){
$(".panel").slideToggle();
});

Spróbuj sam

Funkcje fade jQuery - fadeIn(), fadeOut(), fadeTo()

jQuery ma następujące funkcje fade:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed Parametr może przyjąć te wartości: "slow", "fast", "normal" lub milisekundy.

W funkcji fadeTo() opacity Parametr określa zmniejszenie do podanej nieprzejrzystości.

callback Parametr to nazwa funkcji, która jest wykonywana po zakończeniu działania tej funkcji. Będziesz się uczyć więcej o tym w poniższych rozdziałach tego przewodnika. callback Zrozumienie parametrów.

Przykład użycia fadeTo()

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Spróbuj sam

Przykład użycia fadeOut()

$("button").click(function(){
$("div").fadeOut(4000);
});

Spróbuj sam

Niestandardowe animacje jQuery

Gramatyka funkcji jQuery do tworzenia niestandardowych animacji:

$(selector).animate({params},[duration],[easing],[callback])

Kluczowym parametrem jest paramsOkreśla CSS atrybuty powodujące animację. Można jednocześnie ustawić wiele takich atrybutów:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

Drugi parametr to durationOkreśla czas zastosowany do animacji. Ustawione wartości to: "slow", "fast", "normal" lub milisekundy.

Przykład 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Spróbuj sam

Przykład 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Spróbuj sam

Elementy HTML są domyślnie statycznie umieszczone i nie można ich przesuwać.

Aby umożliwić ruch elementom, ustaw CSS position na relative lub absolute.

jQuery efekt - z tej strony

Funkcja Opis
$(selector).hide() Ukryj wybrany element
$(selector).show() Wyświetl wybrany element
$(selector).toggle() Przełącz (między ukryciem i wyświetlaniem) wybranego elementu
$(selector).slideDown() Przesuń w dół (wyświetl) wybrany element
$(selector).slideUp() Przesuń w górę (ukryj) wybrany element
$(selector).slideToggle() Przełącz na w górę i w dół dla wybranego elementu
$(selector).fadeIn() Zwiększ przezroczystość wybranego elementu
$(selector).fadeOut() Zmniejsz przezroczystość wybranego elementu
$(selector).fadeTo() Zmniejsz przezroczystość wybranego elementu do podanej wartości
$(selector).animate() Wykonaj niestandardową animację dla wybranego elementu

Aby uzyskać pełny podręcznik, odwiedź naszą Podręcznik jQuery Effect.

  • Poprzednia strona
  • Następna strona