English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQuery 效果 - 滑动

jQuery提供了一个简单的界面来执行各种惊人的效果。

jQuery效果方法使我们能够以最少的配置快速应用常用的效果。

jQuery滑动方法

使用jQuery,我们可以在元素上创建滑动效果。

我们有以下jQuery幻灯片方法:

下面将向您展示如何使用每种滑动方法。

jQuery slideUp()和slideDown()

slideUp()方法通过滑动隐藏选定的元素。

slideDown()方法以滑动方式显示选定的元素。

下面的示例演示了slideUp()方法和slideDown()方法的用法:

// 向上滑动段落
 1
      $("p").slideUp();
});
// 向下滑动段落
 2
      $("p").slideDown();
});
Testen Sie es heraus‹/›

Dies istslideUp() 方法的语法:

$(selector).slideUp(duration, easing, callback);

Dies istslideDown()方法的语法:

$(selector).slideDown(duration, easing, callback);

无论slideUp()slideDown()Die Methode akzeptiert drei optionale Parameter:

  • duration -Bestimmt die Dauer der Bewegungseffekte. Mögliche Werte: "slow", "fast" oder Millisekunden

  • easing -Zeigt die zu verwendende Easing-Funktion an. Mögliche Werte: "swing", "linear"

  • callback-指定滑动方法完成后要调用的函数

下面的示例演示了使用slideUp()和slideDown()的duration参数:

1
  $("p").slideUp(1500);
});
2
  $("p").slideDown(1500);
});
Testen Sie es heraus‹/›

下面的示例演示了带有slideUp()和slideDown()的回调参数:

1
  $("div").slideUp(1500, function(){
    alert("向上滑动完成!");
  });
});
2
  $("div").slideDown(1500, function(){
    alert("Abwischen nach unten abgeschlossen!");
  });
});
Testen Sie es heraus‹/›

Alle Spannen (im vorliegenden Fall Wörter) animieren, um schnell zu wischen, in200 Millisekunden für jede Animation abgeschlossen:

$("button").click(function(){
  $("span:last-child").slideUp("fast", function(){
    $(this).prev().slideUp("fast", arguments.callee);
  });
});
Testen Sie es heraus‹/›

den jQuery slideToggle()-Method

Wir können auchslideToggle()Die Methode wechselt zwischen HTML-Elementen durch Wischen nach oben und unten.

Wenn das ausgewählte Element ursprünglich angezeigt wird, wird es versteckt; wenn es versteckt ist, wird es angezeigt.

Das folgende Beispiel zeigt, dass beim Klicken auf die Schaltfläche, alles<p>Umschalten zwischen slideUp und slideDown des Elements:

$("button").click(function(){
  $("p").slideToggle(1500);
});
Testen Sie es heraus‹/›

Dies istslideToggle()Die Syntax der Methode ist:

$(selector).slideToggle(duration, easing, callback);

slideToggle()Die Methode akzeptiert drei optionale Parameter:

  • duration -Bestimmt die Dauer der Bewegungseffekte. Mögliche Werte: "slow", "fast" oder Millisekunden

  • easing -Zeigt die zu verwendende Easing-Funktion an. Mögliche Werte: "swing", "linear"

  • callback-Eine Funktion, die nach dem Abschluss von slideToggle() aufgerufen wird

jQuery Effekt Referenz

Für vollständige Effektreferenzen besuchen Sie bitte unserejQuery Effekt Referenzhandbuch.