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();

});

效果展示

停止动画