-
jQuery效果常用方法
| 方法 | 描述 | 语法(带-为可选参数) |
|---|---|---|
| animate() | animate() 方法执行 CSS 属性集的自定义动画 | $(selector).animate({styles},-speed,-easing,-callback) |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 | $(selector).fadeIn(-speed,-callback) |
| fadeOut() | 逐渐改变被选元素的透明度，从可见到隐藏 | $(selector).fadeOut(-speed,-callback) |
| fadeTo() | fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值 | $(selector).fadeTo(-speed,opacity,-callback) |
| hide() | 隐藏被选的元素 | $(selector).hide(-speed,-callback) |
| show() | 显示被选的元素 | $(selector).show(-speed,-callback) |
| slideDown() | 通过使用滑动效果，显示隐藏的被选元素 | $(selector).slideDown(-speed,-callback) |
| slideToggle() | 使用滑动效果（高度变化）来切换元素的可见状态 | $(selector).slideToggle(-speed,-callback) |
| slideUp() | 通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话 | $(selector).slideUp(-speed,-callback) |
| stop() | 停止当前正在运行的动画 | $(selector).stop(-stopAll,-goToEnd) |
| toggle() | 切换元素的可见状态 | $(selector).toggle(-speed,-callback,-switch) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#small {
height: 160px;
width: 160px;
border: 1px lightgreen solid;
border-radius: 80px;
margin: 100px;
}
#ball {
height: 18px;
width: 18px;
background-color: red;
border-radius: 9px;
margin: 71px;
position: relative;
}
</style>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<div id="small">
<div id="ball">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var pi = Math.PI;
var x = 0.01 * pi;
var sinx = Math.sin(x);
var cosx = Math.cos(x);
var r = 90;
var opa = 1;
var idx = 0;
setInterval(function() {
$("#ball").animate({
top: r * sinx,
left: r * cosx,
opacity: opa
}, 0.1);
x += 0.01 * pi;
sinx = Math.sin(x);
cosx = Math.cos(x);
(idx==0)?(opa-=0.01):(opa+=0.01);
if(opa <= 0.1) {
idx = 1;
}
if(opa >= 1) {
idx = 0;
}
}, 0.1);
});
</script>
</body>
</html>
test31.gif
-
Callback & Chaining
- Callback:当效果执行结束后调用的函数,防止效果结束前执行;
- Chaining:链,可在一次选择器定位后,通过点链接实现多种效果;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 208px;
font-family: "楷体";
}
#clickLable{
text-align: center;
background-color: gainsboro;
padding: 0.3em;
border-radius: 0.6em;
margin: 0 2em;
}
#contentLable{
background-color: gainsboro;
padding: 0.5em;
border-radius: 1em;
margin-top: 0.2em;
line-height: 1.5em;
}
</style>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<div>
<h3 id="clickLable">点击隐藏</h3>
<p id="contentLable">
海上生明月，天涯共此时。<br />
情人怨遥夜，竟夕起相思。<br />
灭烛怜光满，披衣觉露滋。<br />
不堪盈手赠，还寝梦佳期。
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
//点击隐藏/显示
$("#clickLable").click(function(){
$("#contentLable").toggle(500,function(){
if($("#clickLable").text()=="点击隐藏") $("#clickLable").text("点击展开");
else $("#clickLable").text("点击隐藏");
});
}).mousedown(function(){
$(this).css({"background-color":"darkslategray","color":"white"});
}).mouseup(function(){
$(this).css({"background-color":"gainsboro","color":"black"});
});
});
</script>
</body>
</html>
test32.gif
