JQuery自学笔记--Day03 JQuery特效
一:Jquery包括能做出哪些特效效果
1:隐藏和显示特效(hide() 和 show())
2:淡入和淡出特效(fadeIn()和 fadeOut())
3:JQuery滑动
4:JQuery动画
5:JQuery stop()
6:Jquery CallBack
7:JQuery Chaining
二:特效学习
2.1 淡入和淡出学习
JQuery 提供了下面几种方法可以实现显示的淡入淡出效果:
?fadeIn()
?fadeOut()
?fadeToggle()
?fadeTo()
fadeIn()方法
fadeIn() 实现淡入效果,其基本语法如下:
$(selector).fadeIn(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut()方法
fadeOut() 实现淡出效果,其基本语法如下:
$(selector).fadeOut(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeToggle()方法
fadeToggle() 交替进行fadeIn()和fadeOut(),如果元素是淡出的,那么fadeToggle()将淡入该元素,如果之前是淡入的,fadeToggle将淡出该元素。
其基本语法如下:
$(selector).fadeToggle(speed,callback);
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在fadeIn()方法结束后调用。
下面例子,点击按钮之后,可以交替淡出淡入三个矩形。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JQuery Learning</title>
<script src="<%=contextPath%>/js/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br>
<br>
<div id="div1" style="width: 80px; height: 80px; background-color: red;"></div>
<br>
<div id="div2" style="width: 80px; height: 80px; background-color: green;"></div>
<br>
<div id="div3" style="width: 80px; height: 80px; background-color: blue;"></div>
</body>
</body>
</html>
fadeTo()方法
fadeTo() 实现淡化到指定的透明度,其基本语法如下:
$(selector).fadeTo(speed,opacity,callback);
必需参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个必须参数为透明度,值域为0到1之间。
可选参数为回调函数,在fadeTo()方法结束后调用。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});