jQuery 效果 - 滑动

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

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

jQuery滑动方法

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

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

• slideUp()

• slideDown()

• slideToggle()

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

jQuery slideUp()和slideDown()

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

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

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

//　向上滑动段落
　1
　　　　　　$("p").slideUp();
});
//　向下滑动段落
　2
　　　　　　$("p").slideDown();
});

これはslideUp() 方法的语法：

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

これはslideDown()方法的语法：

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

无论slideUp()和slideDown()メソッドは3つのオプションパラメータを受け入れます：

• duration -スライド効果がどれくらいの時間で実行されるかを決定します。可能な値は「slow」、「fast」またはミリ秒です

• easing -トランジションに使用するエイジング機能を示します。可能な値は「swing」、「linear」です

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

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

1
　　$("p").slideUp(1500);
});
2
　　$("p").slideDown(1500);
});

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

1
　　$("div").slideUp(1500,　function(){
　　　　alert("向上滑动完成!");
　　});
});
2
　　$("div").slideDown(1500,　function(){
　　　　alert("スライドダウン完了！");
　　});
});

すべてのスペース（この場合、単語）をアニメーション化して、200ミリ秒以内に各アニメーションを完了します：

$("button").click(function(){
　　$("span:last-child").slideUp("fast",　function(){
　　　　$(this).prev().slideUp("fast",　arguments.callee);
　　});
});

jQuery slideToggle()メソッド

また、以下を使用できますslideToggle()方法はHTML要素間で上下にスライドします。

もし選択された要素が最初に表示されている場合、それが隠されます；隠されている場合、それが表示されます。

以下の例では、ボタンをクリックすると、すべて<p>要素のslideUpとslideDownの間で切り替え：

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

これはslideToggle()methodの文法：

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

slideToggle()メソッドは3つのオプションパラメータを受け入れます：

• duration -スライド効果がどれくらいの時間で実行されるかを決定します。可能な値は「slow」、「fast」またはミリ秒です

• easing -トランジションに使用するエイジング機能を示します。可能な値は「swing」、「linear」です

• callback-slideToggle()メソッドが完了した後に呼び出す関数を指定します

jQueryエフェクトリファレンス

完全なエフェクトリファレンスについては、以下のjQueryのエフェクトリファレンスマニュアル。