<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="../include/BaseInclude.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>JQuery淡入淡出效果</title>
<script type='text/javascript' src="page/js/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnFadein").bind("click",Fadein); //为btnFadein绑定click时间
$("#btnFadeout").bind("click",Fadeout); //为btnFadeout绑定click时间
$("#divD").slideDown(2000); //滑入
$("#divD").slideUp(4000); //滑出
})
function Fadein(){
$("#divD").slideDown("slow"); //滑入
}
function Fadeout(){
$("#divD").slideUp("slow"); //滑出
}
</script>
<html>
<body>
<input type="button" value="滑入" id="btnFadein" />
<input type="button" value="滑出" id="btnFadeout"/>
<div id="divD" style="width:200px;height:200px;border:1px red solid;display:none;background-color:red;">
</div>
</body>
</html>
分享到：
相关推荐
jquery实现从不同角度滑入滑出的左右全屏banner
html+css+jquery实现侧边栏的滑入滑出 分为两种模式 第一种是hover实现， 第二种是jquery实现
【Jquery经典特效24】jQuery鼠标悬停向上滑出遮罩效果
jquery自动手风琴滑动预览特效是一款基于jquery实现的自动手风琴滑动切换效果。
jQuery底部滑出信息是一款页面拖动到底部自动滑出相关的信息。
jquery鼠标滑过闪光滑出标题是一款点击左右箭头，图片谈出消失，图片淡入显示。
jquery自动轮播可点击可滑动
jquery html5自适应滑动缩略图片自动分组 jquery html5自适应滑动缩略图片自动分组
一个自动加手动的图片切换案例，很好的例子，欢迎大家下载试用。
jquery实现从不同角度滑入滑出的左右全屏banner.zip
75、jQuery响应式线条滑出列表特效
jquery 自动补全搜索框控件 jquery 自动补全搜索框控件 jquery 自动补全搜索框控件
jquery手动自动图片切换是一款多屏幕切换的焦点图特效。
jQuery autocomplete自动搜索
jquery自动补全插件（jquery autocomplete） 内包含使用说明，前台+后台
jquery实现从不同角度滑入滑出的banner焦点图实例源码，供大家一起参考学习。
jquery HTML漂亮的横向滑出导航
JQUERY 自动轮播功能， 自动适应PC 手机端口显示 ， 平滑过渡