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()메서드는 세 가지 선택 사항 파라미터를 받습니다:

• duration -스ライ딩 효과가 얼마나 오래 실행될지 결정합니다. 가능한 값: "slow", "fast" 또는 밀리초

• easing -이동 효과를 위해 사용할缓动 기능을 지시합니다. 가능한 값: "swing", "linear"

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

下面的示例演示了使用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()메서드는 세 가지 선택 사항 파라미터를 받습니다:

• duration -스ライ딩 효과가 얼마나 오래 실행될지 결정합니다. 가능한 값: "slow", "fast" 또는 밀리초

• easing -이동 효과를 위해 사용할缓动 기능을 지시합니다. 가능한 값: "swing", "linear"

• 콜백-slideToggle() 메서드가 완료된 후 호출할 함수를 지정합니다

jQuery 효과 참조

완전한 효과 참조에 대해 방문하십시오jQuery 효과 참조 가이드。