四.JQuery效果
jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
4.1.jQuery 效果函数
方法 | 描述 |
对被选元素应用“自定义”的动画 | |
对被选元素移除所有排队的函数(仍未运行的) | |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 运行被选元素的下一个排队函数 |
逐渐改变被选元素的不透明度,从隐藏到可见 | |
逐渐改变被选元素的不透明度,从可见到隐藏 | |
把被选元素逐渐改变至给定的不透明度 | |
隐藏被选的元素 | |
queue() | 显示被选元素的排队函数 |
显示被选的元素 | |
通过调整高度来滑动显示被选元素 | |
对被选元素进行滑动隐藏和滑动显示的切换 | |
通过调整高度来滑动隐藏被选元素 | |
停止在被选元素上运行动画 | |
对被选元素进行隐藏和显示的切换 |
(注:jQuery效果函数摘自www.3school.com.cn)
4.2常用实例
jQuery 效果
函数 | 描述 |
$(selector).hide() | 隐藏被选元素 |
$(selector).show() | 显示被选元素 |
$(selector).toggle() | 切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() | 向下滑动(显示)被选元素 |
$(selector).slideUp() | 向上滑动(隐藏)被选元素 |
$(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() | 淡入被选元素 |
$(selector).fadeOut() | 淡出被选元素 |
$(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
$(selector).animate() | 对被选元素执行自定义动画 |
4.2.1通过 hide()和 show()两个函数,jQuery支持对 HTML元素的隐藏和显示
实例:
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide"type="button">隐藏</button>
<button id="show"type="button">显示</button>
</body>
</html>
hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
语法:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。
实例:
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<buttontype="button">隐藏</button>
<p>Thisis a paragraph with little content.</p>
<p>Thisis another small paragraph.</p>
</body>
</html>
4.2.2自定义动画
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<p><ahref="#" id="start">Start Animation</a></p>
<divid="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
(注:以上内容是通过http://www.w3school.com.cn学习,很多内容粘帖下来是为了方便学习)