jQuery 效果 - 滑动

jQuery slide 方法上下滑动元素。

点击向上/向下滑动面板

实例

jQuery fadeIn()

演示 jQuery slideDown() 方法。

jQuery fadeOut()

演示 jQuery slideUp() 方法.

jQuery fadeToggle()

演示 jQuery slideToggle() 方法.

jQuery 滑动方法

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

jQuery 有着如下的滑动方法:

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法:

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

可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.

可选参数 callback 是在 slideDown() 结束后执行的函数。

下面的实例演示了具有不同参数的 slideDown() 方法:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
<style>
#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">点击向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

运行一下

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法:

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

可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.

可选参数 callback 是在 slideUp() 结束后执行的函数。

下面的实例演示了具有不同参数的 slideUp() 方法:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
<style>
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
}
</style>
</head>
<body>
<div id="flip">点击向上滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

运行一下

jQuery slideToggle() 方法

jQuery slideToggle() 方法是在 slideDown() 与 slideUp() 方法之间切换。

如果元素已经向下滑动过了, slideToggle() 将执行向上滑动。

如果元素已经向上滑动过了, slideToggle() 将执行向下滑动。

语法:

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

可选参数 speed 指定效果的持续时间。它可以采用以下值: "slow", "fast", 或者毫秒.

可选参数 callback 是在滑动结束后执行的函数。

下面的实例演示了具有不同参数的 slideToggle() 方法:

实例

<!DOCTYPE html>
<html>
<head>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<style>
#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">点击上下切换滑动</div>
<div id="panel">Hello world!</div>
</body>
</html>

运行一下

jQuery 效果参考

有关所有 jQuery 效果的完整概述，请访问本站的 jQuery 效果参考。

jQuery 效果 - 滑动

实例

jQuery 滑动方法

jQuery slideDown() 方法

语法:

实例

jQuery slideUp() 方法

语法:

实例

jQuery slideToggle() 方法

语法:

实例

jQuery 效果参考

分类导航