文档查询地址：http://jquery.cuishifeng.cn/
通过 jQuery，可以实现元素的淡入淡出效果
jQuery 拥有下面四种 fade 方法：
fadeIn() 用于淡入已隐藏的元素
fadeOut() 方法用于淡出可见元素
fadeToggle()该方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
<style type="text/css">
*{margin:0;padding:0;}
p{width:300px;height:200px;text-align:center;line-height:200px;background:#690;
display:;/*隐藏*/
}
</style>
<body>
<input type="button" value="提 交" id="btn"/>
<p>我是Ming</p><br />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
// 用600毫秒缓慢的将段落淡入
//$("p").fadeIn("slow");
// 用200毫秒快速将段落淡入，之后弹出一个对话框
/* $("p").fadeIn(3000,function(){
$("p").text("想想 还是Ming 帅 ！");
});
*/
// 用600毫秒缓慢的将段落淡入
// $("p").fadeOut("slow");
// 用200毫秒快速将段落淡入，之后弹出一个对话框
/* $("p").fadeOut(3000,function(){
$("p").text("想想 还是 还是Ming、 帅 ！");
});
*/
$("p").fadeToggle(1000,function(){
$("p").text("想想 还是 还是Ming 帅 ！");
});
});
</script>
</body>
<style type="text/css">
*{margin:0;padding:0;}
p{width:300px;height:200px;text-align:center;line-height:200px;background:#690;
display:none;/*隐藏*/
}
</style>
<body>
<input type="button" value="提 交" id="btn"/>
<p>我是Ming</p><br />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
// 隐藏所有段落
// $("p").hide();
// 用600毫秒的时间将段落缓慢的隐藏 slow=600
// $("p").hide("slow");
// 用200毫秒将段落迅速隐藏，之后弹出一个对话框 fast=200
/* $("p").hide(200,function(){
alert("0");
});
*/
// show()显示
// $("p").show();
// 用缓慢的动画将隐藏的段落显示出来，历时600毫秒
//$("p").show(3000);
// 用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！
/* $("p").show(3000,function(){
$(this).text("欢欢迎中山学院！ ！");
});
*/
//对表格切换显示/隐藏
// $("p").toggle();
// 用600毫秒的时间将段落缓慢的切换显示状态
// $("p").toggle("slow");
$("p").toggle(3000,function(){
$("p").text("欢迎中山学院！");
});
});
</script>
</body>
///////////////////////////////////////////////////////////////
<style type="text/css">
*{margin:0;padding:0;}
p{width:300px;height:200px;text-align:center;line-height:200px;background:#690;
display:;/*隐藏*/
}
</style>
<body>
<input type="button" value="提 交" id="btn"/>
<p>我是Ming</p><br />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
// 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
/*
$("p").slideDown(3000);
$("p").slideDown(3000,function(){
alert("SEO真的太棒了 ！ ");
});
*/
/* $("p").slideUp(3000,function(){
alert("SEO真的太棒了 ！ ");
});
*/
$("p").slideToggle(3000,function(){
alert("SEO真的太棒了 ！ ");
});
});
</script>
</body>
jQuery stop() 方法用于在动画或效果完成前对它们进行停止
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
<style type="text/css">
*{margin:0;padding:0;}
p{width:300px;height:200px;text-align:center;line-height:200px;background:#690;
display:;/*隐藏*/
position:absolute;left:0;top:20px;
}
</style>
<body>
<input type="button" value="开始动画" id="btn"/>
<input type="button" value="停止动画" id="stop"/>
<p>我是Ming</p><br />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// 开始动画
$("#btn").click(function(){
$("p").animate({left: ‘+1000px‘}, 2000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$("p").stop();
});
</script>
</body>
<style type="text/css">
*{margin:0;padding:0;}
p{width:300px;height:200px;text-align:center;line-height:200px;background:#690;
display:none;/*隐藏*/
position:absolute;left:0;top:20px;
}
</style>
<body>
<input type="button" value="提 交" id="btn"/>
<p>我是Ming</p><br />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
// 用于创建自定义动画的函数
/*$("p").animate({
width:"100%",
height:"100%",
fontSize:"30px",
color:"red"
},1000);*/
// $("p").animate({left: ‘-500px‘}, 3000);
/*
$("p").animate({
height: ‘toggle‘,
opacity: ‘toggle‘
}, 3000);
*/
// 用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
$("p").animate({
left: 500, opacity: ‘show‘
}, 500);
});
</script>
</body>
时间： 2024-10-04 19:47:53