資料來源
1.元素的顯示與隱藏
1.1顯示元素show()
語法
$(selector).show(speed,callback);
顯示已經設置隱藏的元素
1.2隱藏元素hide()
語法
$(selector).hide(speed,callback);
隱藏已顯示的元素
1.3顯示、隱藏的切換toggle
語法
$(selector).toggle(speed,callback)
若元素是隱藏的，則顯示
若元素時顯示的，則隱藏
參數說明
speed:規定顯示或隱藏的速度，取值：slow,fast,毫秒數
callback: 回調函數，當顯示或隱藏執行后，執行的函數；
栗子--二級菜單的顯示與隱藏
HTML
<ul class="menu">
<li><a href="javascript:;">menu1</a><li>
<li><a href="javascript:;">menu2</a>
<ul class="sub-menu">
<li><a href="javascript:;">mune21</a></li>
<li><a href="javascript:;">menu22</a></li>
</ul>
</li>
<li><a href="javascript:;">menu3</a></li>
<li><a href="javascript:;">menu4</a></li>
</ul>
CSS
ul,li,a{padding:0;margin:0;list-style:none;text-decoration:none;}
.menu{width:960px;height:45px;border-radius:5px;margin:100px auto;}
.menuli{float:left;position:relative;background:indianred;-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.menuli a{display:inline-block;width:120px;height:45px;line-height:45px;text-align:center;margin:0 15px;padding:0 10px;color:#fff;}
.menuli a:hover{color:paleturquoise;}
.sub-menu{display:none;width:100%;position:absolute;top:70px;}
.sub-menu:after{content:'';width:0;height:0;position:absolute;top:-40px;left:65px;border:20px solid transparent;;border-bottom-color:indianred;z-index:100;}
JS
方法一：使用show(),hide()
$('.menuli').mouseover(function() {
$(this).find('.sub-menu').show();
}).mouseout(function() {
$(this).find('.sub-menu').hide();
});
方法二：使用toggel()
$('.menuli').mouseover(function() {$(this).find('.sub-menu').toggle();}).mouseout(function() {$(this).find('.sub-menu').toggle();});
效果展示
2.元素的淡入淡出效果
2.1 淡入fadeIn
語法
$(selector).fadeIn(speed,callback)；
淡入已經隱藏的元素
2.2 ?淡出fadeOut
語法
$(selector).fadeOut(speed,callback)；
淡出可見元素
2.3 切換fadeToggle
語法
$(selector).fadeToggle(speed,callback)；
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果
2.4 切換fadeTo
語法
$(selector).fadeTo(speed,opacity,callback)；
參數說明
speed：效果執行的速度
callback: 效果執行完后，調用的函數
opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）
栗子
HTML
<div class="btn-group">
<button class="btn btn1">fadeIn</button>
<button class="btn btn2">fadeOut</button>
<button class="btn btn3">fadeToggle</button>
<button class="btn btn4">fadeTo</button>
</div>
<div class="box box1"> fadeIn</div>
<div class="box box2">fadeOut</div>
<div class="box box3">fadeToggle</div>
<div class="box box4">fadeTo</div>
CSS
div,button{padding:0;margin:0}
.btn{display:inline-block;width:120px;height:34px;line-height:34px;border:none;outline:none;background:paleturquoise;color:purple;}
.box{display:inline-block;margin:30px 15px 0 0;width:200px;height:200px;background:deeppink;transition:all 2s ease-in-out;}
.box1{display:none;}
.box3{display:none;background-color:aquamarine;}
.box4{opacity:0;}
JS
$(function() {
$('.btn1').click(function() {
$('.box1').fadeIn(2000).css('background','paleturquoise');
});
$('.btn2').click(function() {
$('.box2').fadeOut('slow');
});
$('.btn3').click(function() {
$('.box3').fadeToggle();
});
$('.btn4').click(function() {
$('.box4').fadeTo(3000,1)
});
});
效果展示
3.滑動
3.1向下滑動slideDown
語法
$(selector).slideDown(speed,callbback)
3.2向上滑動slideUp
語法
$(selector).slideUp(speed,callbback)
3.3切換slideToggle
語法
$(selector).slideToggle(speed,callbback)
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
參數說明
speed：效果執行的速度
callback: 效果執行完后，調用的函數
栗子
HTML
<div class="box1">
<div class="box2"></div>
</div>
CSS
div{padding:0;margin:0}
.box1{position:relative;top:50%;left:50%;width:200px;height:200px;background:khaki;}
.box2{display:none;position:absolute;left:0;bottom:0;width:200px;height:100px;background:#333;opacity:0.5;z-index:10;}
JS
$(function() {
var isclick =true;
$('.box1').click(function() {
if(isclick) {
$('.box2').slideDown();
isclick =false;
}else{
$('.box2').slideUp();
isclick =true;
}
});
});
效果展示
3.4動畫animate
語法
$(selector).animate({param},speed,callback)
參數說明
{param}： 需要設置動畫效果的CSS屬性
speed: 動畫執行的時間
callback:動畫效果執行完后，調用的函數
注意：
當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
animate:可以使用相對值，在值的前面加上 += 或 -=；
栗子
HTML
<div class="box"></div>
CSS
div{padding:0;margin:0;}
.box{position:relative;top:0;left:0;width:100px;height:100px;border-radius:100%;background-color:brown;transition:all 0.35s ease;}
JS
var iSpeed =0,timer =null;
timer = setInterval(function() {
iSpeed++;
$('.box').animate({
left: iSpeed*10+'px'
},'fast');
if(iSpeed ===15) {
clearInterval(timer);
}
},1000)
效果展示
animate使用相對值
$(function() {
$('.changeSize').click(function() {
$(this).animate({
width:'+=200px',
height:'+=250px',
left:'200px'
});
});
});
效果展示
3.5停止動畫stop
語法
$(selector).stop(stopAll,goToEnd)
參數說明
stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行；
goToEnd 參數規定是否立即完成當前動畫。默認是 false；
默認地，stop() 會清除在被選元素上指定的當前動畫
stop方法的使用可以不帶參數
栗子
HTML
<button class="stop"></button>
<div class="box"></div>
CSS
div{padding:0;margin:0;}
.box{position:relative;top:0;left:0;width:100px;height:100px;background-color:orchid;}
.stop{display:block;border:none;outline:none;width:80px;height:34px;line-height:34px;background-color:aqua;}
JS
$('.box').click(function() {
$('.box').animate({left:'500px'},5000);
});
$('.stop').click(function() {
$('.box').stop();
});
效果展示
