html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例

本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果。分享给大家供大家参考，具体如下：

1. 淡入淡出效果：

我们做这样一个实例：

有两个按钮，点击淡入，有一个div层淡入，点击淡出，div层淡出：

www.jb51.net jQuery淡入淡出

.div{width: 300px;height: 300px;background-color: red;display: none;}

$(function(){

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

$(".div").fadeIn();

});

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

$(".div").fadeOut();

});

});

我是一个div块哦！！！！！

运行效果：

2. 滑入滑出效果：

我们做这样一个实例：

有两个按钮，点击滑入，有一个div层滑入，点击滑出，div层滑出：

www.jb51.net jQuery滑入滑出

.div{width: 300px;height: 300px;background-color: green;display: none;}

$(function(){

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

$(".div").slideDown();

});

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

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

});

});

我是一个div块哦！！！！！

运行效果：

希望本文所述对大家jQuery程序设计有所帮助。