本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果。分享给大家供大家参考,具体如下:
1. 淡入淡出效果:
我们做这样一个实例:
有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出:
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层滑出:
jQuery滑入滑出
.div{width: 300px;height: 300px;background-color: green;display: none;}
$(function(){
$("#btn").click(function(){
$(".div").slideDown();
});
$("#btna").click(function(){
$(".div").slideUp();
});
});
我是一个div块哦!!!!!
运行效果:
希望本文所述对大家jQuery程序设计有所帮助。