jQuery Efekty - Wyostrzanie i Wygaszanie

Przez jQuery możesz osiągnąć efekt wyostrzania i wygaszania elementów.

Pokaz efektów

Kliknij tutaj, aby ukryć/wyświetlić panel

Czas jest złotem, więc oferujemy Ci szybkie i zrozumiałe materiały edukacyjne.

Tutaj możesz łatwo zdobyć potrzebującą wiedzę w zrozumiały sposób.

Przykład

jQuery fadeIn()
Pokaz metody fadeIn() jQuery.
jQuery fadeOut()
Pokaz metody fadeOut() jQuery.
jQuery fadeToggle()
Pokaz metody fadeToggle() jQuery.
jQuery fadeTo()
Pokaz metody fadeTo() jQuery.

Metody Fading jQuery

Przez jQuery możesz osiągnąć efekt wyostrzania i wygaszania elementów.

jQuery ma poniżej cztery metody fade:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Metoda fadeIn() jQuery

Metoda fadeIn() jQuery używa się do wyostrzania ukrytych elementów.

Gramatyka:

$(selector).fadeIn(speed,callback);

Opcjonalny speed Parametr określa czas trwania efektu. Może przyjąć wartości: "slow", "fast" lub milisekundy.

Opcjonalny callback Parametr to nazwa funkcji, która zostanie wykonana po zakończeniu efektu przyciemniania.

Poniższy przykład pokazuje metodę fadeIn() z różnymi parametrami:

Przykład

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

Spróbuj sam

Metoda fadeOut() jQuery

Metoda fadeOut() jQuery używa się do wygaszania widocznych elementów.

Gramatyka:

$(selector.fadeOut(speed,callback);

Opcjonalny speed Parametr określa czas trwania efektu. Może przyjąć wartości: "slow", "fast" lub milisekundy.

Opcjonalny callback Parametr to nazwa funkcji, która zostanie wykonana po zakończeniu efektu przyciemniania.

Poniższe przykłady pokazują fadeOut() metodę z różnymi parametrami:

Przykład

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

Spróbuj sam

Metoda fadeToggle() jQuery

Metoda fadeToggle() jQuery może przełączać między fadeIn() i fadeOut() metodami.

Jeśli element jest już wygaszony, fadeToggle() doda efekt przyciemniania.

Jeśli element jest już przyciemniony, fadeToggle() doda efekt wygaszania.

Gramatyka:

$(selector).fadeToggle(speed,callback);

Opcjonalny speed Parametr określa czas trwania efektu. Może przyjąć wartości: "slow", "fast" lub milisekundy.

Opcjonalny callback Parametr to nazwa funkcji, która zostanie wykonana po zakończeniu efektu przyciemniania.

Poniższe przykłady pokazują fadeToggle() metodę z różnymi parametrami:

Przykład

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

Spróbuj sam

Metoda fadeTo() jQuery

Metoda fadeTo() jQuery pozwala na stopniowe przechodzenie do określonej przez użytkownika nieprzejrzystości (wartość między 0 a 1).

Gramatyka:

$(selector).fadeTo(speed,opacity,callback);

Obowiązkowy parametr speed określa czas trwania efektu. Może przyjąć wartości: "slow", "fast" lub milisekundy.

Obowiązkowy parametr opacity w metodzie fadeTo() ustawia efekt przyciemniania/przywracania na podaną przez użytkownika nieprzejrzystość (wartość między 0 a 1).

Opcjonalny parametr callback to nazwa funkcji, która zostanie wykonana po zakończeniu działania funkcji.

Poniższe przykłady pokazują fadeTo() metodę z różnymi parametrami:

Przykład

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

Spróbuj sam

jQuery Podręcznik Efektów

Aby w pełni przeglądać efekty jQuery, odwiedź nasz jQuery Podręcznik Efektów。