Efekty jQuery – Posuvné


Metody snímků jQuery posouvají prvky nahoru a dolů.

Klepnutím posuňte panel dolů/nahoru

Protože čas je cenný, poskytujeme rychlé a snadné učení.

Na W3Schools můžete studovat vše, co se potřebujete naučit, v dostupném a praktickém formátu.


Příklady


Ukazuje metodu jQuery slideDown().


Ukazuje metodu jQuery slideUp().


Ukazuje metodu jQuery slideToggle().


Posuvné metody jQuery

S jQuery můžete vytvořit posuvný efekt na prvky.

jQuery má následující metody snímků:

  • slideDown()
  • slideUp()
  • slideToggle()

Metoda jQuery slideDown().

Metoda jQuery slideDown()se používá k posunutí prvku dolů.

Syntax:

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

Volitelný parametr rychlosti určuje dobu trvání efektu. Může nabývat následujících hodnot: „slow“, „fast“ nebo milisekundy.

Volitelný parametr zpětného volání je funkce, která se má provést po dokončení posuvu.

Následující příklad ukazuje slideDown()metodu:

Příklad

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


Metoda jQuery slideUp().

slideUp()K posunutí prvku nahoru se používá metoda jQuery .

Syntax:

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

Volitelný parametr rychlosti určuje dobu trvání efektu. Může nabývat následujících hodnot: „slow“, „fast“ nebo milisekundy.

Volitelný parametr zpětného volání je funkce, která se má provést po dokončení posuvu.

Následující příklad ukazuje slideUp()metodu:

Příklad

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

Metoda jQuery slideToggle().

Metoda jQuery slideToggle()přepíná mezi metodami slideDown()a .slideUp()

Pokud byly prvky posunuty dolů, slideToggle()vysune je nahoru.

Pokud byly prvky posunuty nahoru, slideToggle()posuňte je dolů.

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

Volitelný parametr rychlosti může nabývat následujících hodnot: „pomalý“, „rychlý“, milisekundy.

Volitelný parametr zpětného volání je funkce, která se má provést po dokončení posuvu.

Následující příklad ukazuje slideToggle()metodu:

Příklad

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

Cvičení jQuery

Otestujte se pomocí cvičení

Cvičení:

Použijte metodu jQuery k posunutí prvku <div> nahoru.

$("div").();


Referenční příručka k efektům jQuery

Úplný přehled všech efektů jQuery naleznete v naší Referenční příručce efektů jQuery .