jQuery 入门教程- 滑动效果

发布时间:2017-09-04 12:13:17
jQuery 入门教程: 滑动效果 jQuery支持使用下面方法来实现HTML元素的滑动效果:

slideDown()

slideUp()

slideToggle()

slideDown方法

用来实现向下滑动动画效果,其基本语法为:

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

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)

第二个可选参数为回调函数,在slideDown()方法结束后调用。

下面例子点击按钮#panel 将采用下滑方式显示出来:

[html]

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<title>JQuery Demo</title>

<script src="scripts/jquery-1.9.1.js"></script>

<script>

$(document).ready(function () {

$("#flip").click(function () {

$("#panel").slideDown("slow");

});

});

</script>

<style type="text/css">

#panel, #flip

{

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

}

#panel

{

padding: 50px;

display: none;

}

</style>

</head>

<body>

<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>

</body>

</html>

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<title>JQuery Demo</title>

<script src="scripts/jquery-1.9.1.js"></script>

<script>

$(document).ready(function () {

$("#flip").click(function () {

$("#panel").slideDown("slow");

});

});

</script>

<style type="text/css">

#panel, #flip

{

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

}

#panel

{

padding: 50px;

display: none;

}

</style>

</head>

<body>

<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>

</body>

</html>

slideUp方法

用来实现向上滑动动画效果,其基本语法为:

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

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)

第二个可选参数为回调函数,在slideUp()方法结束后调用。

[javascript]

$("#flip").click(function(){

$("#panel").slideUp();

});

$("#flip").click(function(){

$("#panel").slideUp();

});

slideToggle方法

用来实现交替显示向上向下滑动动画效果,如果之前是下滑显示,slideToggle则显示slideUp(),反之显示slideDown

其基本语法为:

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

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)

第二个可选参数为回调函数,站群,站群,在slideUp()方法结束后调用。

[javascript]

$("#flip").click(function(){

$("#panel").slideToggle();

});

$("#flip").click(function(){

$("#panel").slideToggle();

});

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网络推广 http://www.feimao666.com