jQuery动态效果学习笔记

资料来源

W3Cschool

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;}

$(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;}

$(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;}

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;}

$('.box').click(function() {
$('.box').animate({left:'500px'},5000);
});

$('.stop').click(function() {
$('.box').stop();
});

效果展示

停止动画