资料来源
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'
});
});
});
效果展示
动画效果2
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();
});
效果展示
停止动画
网友评论