jQuery之effect(效果)
程序员文章站
2022-06-10 09:34:06
...
参考资料
从零开始学习jQuery (7) jQuery动画-让页面动起来!
http://www.cnblogs.com/tinawan/archive/2010/11/12/1875743.html
全文代码如下：
从零开始学习jQuery (7) jQuery动画-让页面动起来!
http://www.cnblogs.com/tinawan/archive/2010/11/12/1875743.html
全文代码如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery效果</title>
<style type="text/css">
.panel {
margin-left:25%;
margin-top:5%;
padding: 60px;
background-color: #546456;
color: #FFFFFF;
font-size:30px;
font-weight: bold;
width: 600px;
text-align:center;
}
input{
margin-left:25%;
margin-top:10px;
}
</style>
<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input:button").eq(0).bind("click",function(){
//加上div提高访问速度
/**
*匹配的元素将被立即隐藏，没有动画。这大致相当于调用.css('display', 'none')，但display属性值保存在jQuery的数据缓存中，
*所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline.
*/
$("div.panel").hide();
}).end()//返回所有按钮
.eq(1).click(function(){//绑定第一个按钮事件
//匹配的元素将被立即显示，没有动画。这大致相当于调用.css('display', 'block')
$("div.panel").show();
}).end().eq(2).click(function(){
//当提供一个持续时间参数，.hide()成为一个动画方法。.hide()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画。一旦透明度达到0，
//display样式属性将被设置为none，这个元素将不再在页面中影响布局。
//持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时,normal
//$("div.panel").hide("normal");
//$("div.panel").hide("fast");
//$("div.panel").hide("slow");
$("div.panel").hide(2000);
}).end().eq(3).click(function(){
$("div.panel").show(2000);
}).end().eq(4).click(function(){
$("div.panel").toggle(2000);
}).end().eq(5).click(function (){
//对隐藏的元素进行动画显示:向下滑动（显示）被选元素
$("div.panel").slideDown("slow");
}).end().eq(6).click(function(){
//对显示的元素进行动画隐藏:向上滑动（隐藏）被选元素
$("div.panel").slideUp("slow");
}).end().eq(7).click(function(){
//对元素进行显示和隐藏的切换展示:对被选元素切换向上滑动和向下滑动
$("div.panel").slideToggle("slow");
}).end().eq(8).click(function(){
//对隐藏的元素进行淡化显示效果
$("div.panel").fadeIn("slow");
}).end().eq(9).click(function(){
//对显示的元素进行淡化的隐藏效果
$("div.panel").fadeOut("slow");
}).end().eq(10).click(function(){
//把被选元素淡出为给定的不透明度
$("div.panel").fadeTo("slow",0.2);
}).end().eq(11).click(function(){
//把被选元素淡出为给定的不透明度
$("div.panel").animate({fontSize:"1em"},"slow");
});
});
</script>
</head>
<body>
<div class="panel">
HTML 元素默认是静态定位，且无法移动。
如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。
</div>
<input type="button" value="隐藏DIV: hide()" /><br>
<input type="button" value="显示DIV: show()" /><br>
<input type="button" value="动画隐藏DIV" /><br>
<input type="button" value="动画显示DIV" /><br>
<input type="button" value="jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。" /><br>
<input type="button" value="jQuery 滑动函数 - slideDown" /><br>
<input type="button" value="jQuery 滑动函数 - slideUp" /><br>
<input type="button" value="jQuery 滑动函数 - slideToggle" /><br>
<input type="button" value="jQuery Fade 函数 - fadeIn()" /><br>
<input type="button" value="jQuery Fade 函数 - fadeOut()" /><br>
<input type="button" value="jQuery Fade 函数 - fadeTo()" /><br>
<input type="button" value="jQuery 自定义动画 - animate()" /><br>
<br>
<p><a href="index.jsp">返回</a></p>
</body>
</html>
下一篇： PS利用图案结合背景图片制作出特别的效果