html 向上滑动,jQuery - 使用.slideUp()方法向上滑动HTML元素

jQuery .slideUp()方法向上滑动HTML元素

方法的三个参数都是可选的。滑动速度或者说动画持续时间，可以是数字(毫秒)或者是'fast','slow'等字符串。

动画速度为'fast'时候相当于200毫秒，同样'flow'相当于600毫秒。

如果没有指定速度则默认为400毫秒。

$.slideUp() 能够指定回调函数，当动画完成时执行该回调函数。html>

div {

text-align: center;

color: white;

font-size: xx-large;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 50px;

background-color: orange;

}

$(function() {

$("div#message").click(function(e) {

e.stopPropagation();

$("div#message").slideUp('fast');

});

$(document).click(function() {

$("div#message").slideDown('fast');

});

});

This is a message.

代码展示点击后段落向上滑动

$(document).ready(function(){

$("p").click(function () {

$(this).slideUp();

});

});

findsrc.com

findsrc.com

代码演示点击后DIV向上滑动

$(document).ready(function(){

$("div").click(function () {

$("div").slideUp();

});

});

Click me

代码演示点击按钮后缓慢slow向上移动并执行回调函数。

$(document).ready(function(){

$("button").click(function () {

$(this).parent().slideUp("slow", function () {

alert("done");

});

});

});

Click mebutton

代码演示父元素缓慢向上滑动并执行回调函数。

$(document).ready(function(){

$("button").click(function () {

$(this).parent().slideUp("slow", function () {

alert("done");

});

});

});

Click mebutton

代码展示向上滑动动画持续2000毫秒。

$(document).ready(function(){

$("div").click(function () {

$("div").slideUp(2000);

});

});

Click me findsrc.com

代码演示缓慢向上滑动。

$(document).ready(function(){

$("div").click(function () {

$("div").slideUp("slow");

});

});

Click me findsrc.com

DIV元素向上滑动，默认动画时间为400毫秒。

$(document).ready(function(){

$(document.body).click(function () {

if ($("div:first").is(":hidden")) {

$("div").show("slow");

} else {

$("div").slideUp();

}

});

});

Click me!

findsrc.com

findsrc.com

findsrc.com

findsrc.com

findsrc.com

代码演示向上滑动并执行回调函数。

$(document).ready(function(){

$("button").click(function () {

$(this).parent().slideUp("slow", function () {

$("#msg").text($("button", this).text() + " has completed.");

});

});

});

Hide One

Hide Two

Hide Three