一、jquery中的动画
动画效果也是jquery库吸引人的地方,通过jquery的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验。
1.1show()方法和hide()方法
show()方法和hide()方法是jQuey中最基本的动画方法。在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为none
$("element").hide();
element.css("display","none");
当元素隐藏后,可以使用show方法将元素的display样式设置为先前的显示状态
$("element").show();
注意:用jQuery做动画要求要在标准模式下,否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.show(“slow”)方法和hide(1000)方法让元素动起来
传递参数slow=600 normal=400 fast=200 参数是一个数字,单位是毫秒
左上角向右下角显示,右下角向左下角隐藏
3.fadeIn()方法和fadeOut()方法 :淡入和淡出效果
只改变元素的不透明度。
fadeOut()方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失display:none.
fadeIn()方法则相反
传递参数slow=600 normal=400 fast=200 参数是一个数字,单位是毫秒
2.3 slideUp()和slideDown()方法
slideUp()和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为none,当调用slideDown()方法时,这个元素将由上至下延伸显示。
传递参数slow=600 normal=400 fast=200 参数是一个数字,单位是毫秒
2.4自定义动画方法animate()
前面已经讲了3种类型的动画。其中
slow()方法和hide方法会同时修改元素的多个样式属性,即高度、宽度和不透明度;
fadeOut方法和fadeIn方法只会修改元素的不透明度
slideDown方法和slideUp方法只会改变元素的高度
很多情况下,这些方法无法满足用户的各种需求,那么就需要对动画有更多的控制,需要采取一些高级的自定义动画来解决这些问题。在jquery‘中,可以使用animate方法来自定义动画
animate(params,speed,callback)
params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2",...}
speed:速度参数,可选
callback:在动画完成时执行的函数,可选。
1.自定义简单动画
<style type="text/css">
#panel {
position:relative;
width:100px;
height:100px;
border:1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
为了让元素动起来,要更元素的left样式属性。需要注意的是在使用animate()方法之前,为了能影响该元素的top,left,bottom和right样式属性,必须先把元素的position样式设置为relative或者absolute。本例中是relative
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
})
你再次点击时,该元素就不向右边动了。
2.累加、累减动画
在之前的代码中,添加-=或者+=表示在当前位置累加,累减。
$(this).animate({left:"+=500px"},3000);
3.多重动画
①同时执行多个动画
$(this).animate({left:"500px",height:"200px"},3000);
②按顺序执行多个动画
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);
4.综合动画
单击div元素后让它向右移动的同时增大它的高度,并将它的不透明度从50%变换到100%,然后再让它从上到下移动,同时它的宽度变大,当完成这些效果后,让它以淡出的方式隐藏。
$(this).css("opacity",0.5);
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"500px",width:"200px"},3000).fadeOut(3000);
5.动画回调函数
如果我们想在最后一步不是淡出元素,而是改变css样式。是否只要将上面的淡出方法用css方法替代就行了吗?
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"500px",width:"200px"},3000).css("border","5px solid blue");
运行后,它是先改变了css的样式,并没有在最后一步改变样式属性,因此必须在最后一步使用回调函数,加入到动画队列中去。
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"500px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});
6.停止动画和判断是否处于动画状态
1.停止元素的动画 stop()
stop([clearQueue][,gotoEnd])
参数都是可选参数。为boolean值。
clearQueue代表是否要清空未执行完的动画队列,
gotoEnd代表是否直接将正在执行的动画跳转到末状态。
如果直接使用stop()方法,则会立即停止当前正在进行的动画,
如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。
案例联想:
在为一个元素绑定hover事件之后,用户把光标移入元素时会触发动画效果,而当这个动画还没结束时,用户就将光标移出这个元素了,那么光标移出的动画效果将会被放进队列之中,等待光标移入的动画结束后再执行。因此如果光标移入移出得过快就会导致动画效果与光标的动作不一致。因此只要在光标的移入、移出动画之前加入stop()方法,就能解决这个问题。
stop()方法会结束当前正在执行的动画,并立即执行队列中的下一个动画。
$("#panel").hover(function(){
$(this).stop().animate({height : "150",width : "300"},200);
},function(){
$(this).stop().animate({height : "22" , width : "60"},300);
});
这确实解决了这一问题。倘若是
$("#panel").hover(function(){
$(this).stop().animate({height : "150",width : "300"},200)
.animate({width : "150"},300);
},function(){
$(this).stop().animate({height : "22" , width : "60"},300);
});
若要解决上面的问题,必须使用带参数的方法
$("#panel").hover(function(){
$(this).stop(true).animate({height : "150",width : "300"},200).animate({width : "150"},300);
},function(){
$(this).stop(true).animate({height : "22" , width : "60"},300);
});
第2个参数gotoEnd可以用于让正在执行的动画直接到达结束时刻的状态,通常用于后一个动画需要基于前一个动画的末状态的情况,可以通过stop(false,true)这种方式来让动画直接到达末状态。
当然也可以两者结合起来使用
注意,jquery只能设置正在执行的动画的最终状态,而没有提供直接到达末执行动画队列的方法。
$("div.content").animate({width:"30"},200)
.animate({height:"150"},200)
.animate({opacity:"0.2"},200)
无论怎么设置stop方法,均无法再改变width或者height时,将此div元素的末状态变成30*150的大小,并且透明度为0.2
2.判断元素是否处于动画状态
在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时,就会出现动画积累。解决方法是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。
if(! $(element).is(":animated")){
}
这个判断方法在animate()动画中经常被用到,需要特别注意。
2.7其他动画方法
toggle(speed,[callback])
现实与隐藏切换
slideToggle(speed,[callback])
显示与隐藏切换,但是是通过改变高度实现的
fadeTo(speed,opcity,[callback])
将元素的透明度,设置为指定的值。
2.8动画方法概括
从基本动画方法hide()和show()到fadeIn()和fadeOut(),然后到slideUp()和slideDown(),再到自定义动画方法animate(),最后到交互动画方法toggle()、slideToggle()和fadeTo().
1.改变样式属性
hide()和show() 同时修改多个样式属性,高度、宽度和不透明度
fadeIn()和fadeOut() 只改变不透明度
slideUp() 和slideDown()只改变高度
fadeTo()只改变不透明度
toggle()用来代替hide和show方法,所以会同时修改多个样式属性即高度、宽度和不透明度
slideToggle()用来代替slideUp和slideDown方法。所以只能改变高度
animate 属于自定义动画的方法。以上各种动画方法实质内部都调用了animate方法。
用animate()方法代替show()方法
$("p").animate({height:"show",width:"show",opacity:"show"},400);
等价于
$("p").show(400);
$("p").fadeIn(400) 等价于 $("p").animate({opacity:"show"},400);
在animate方法中内置了特定样式属性的简写形式。这些特定的属性值可以为show、hide、toggle
2.动画队列
(1)一组元素上的动画效果
当在一个animate方法中应用多个属性时,动画是同时发生的。
当以链式的写法应用动画方法时,动画是按照顺序发生的。
(2)多组元素上的动画效果
默认情况下,动画都是同时发生的
当以回调的形式应用动画方式时,动画是按照回调顺序发生的。
二、案例——视频的切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MyHtml.html</title>
<script src="jquery-1.11.3.js" type="text/javascript">
</script>
<style type="text/css">
* {
margin:0;
padding:0;
word-break:break-all;
}
body {
background:#FFF;
color:#333;
font:12px/1.5em Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a {
color:#2B93D2;
text-decoration:none;
}
a:hover {
color:#E31E1C;
text-decoration:underline;
}
ul, li {
list-style:none;
}
fieldset, img {
border:none;
}
.v_show {
width:595px;
margin:20px 0 1px 60px;
}
.v_caption {
height:35px;
overflow:hidden;
background:url(img/btn_cartoon.gif) no-repeat 0 0;
}
.v_caption h2
{
float:left;
width:84px;
height:35px;
overflow:hidden;
background:url(img/btn_cartoon.gif) no-repeat;
text-indent:-9999px;
}
.v_caption .cartoon {
background-position: 0 -100px;
}
.v_caption .variety {
background-position:-100px -100px;
}
.highlight_tip {
display:inline;
float:left;
margin:14px 0 0 10px;
}
.highlight_tip span {
display:inline;
float:left;
width:7px;
height:7px;
overflow:hidden;
margin:0 2px;
background:url(img/btn_cartoon.gif) no-repeat 0 -320px;
text-indent:-9999px;
}
.highlight_tip .current {
background-position:0 -220px;
}
.change_btn {
float:left;
margin:7px 0 0 10px;
}
.change_btn span {
display:block;
float:left;
width:30px;
height:23px;
overflow:hidden;
background:url(img/btn_cartoon.gif) no-repeat;
text-indent:-9999px;
cursor:pointer;
}
.change_btn .prev {
background-position:0 -400px;
}
.change_btn .next {
width:31px;
background-position:-30px -400px;
}
.v_caption em {
display:inline;
float:right;
margin:10px 12px 0 0;
font-family:simsun;
}
.v_content {
position:relative;
width:592px;
height:160px;
overflow:hidden;
border-right:1px solid #E7E7E7;
border-bottom:1px solid #E7E7E7;
border-left:1px solid #E7E7E7;
}
.v_content_list {
position:absolute;
width:2500px;
top:0px;
left:0px;
}
.v_content ul {
float:left;
}
.v_content ul li {
display:inline;
float:left;
margin:10px 2px 0;
padding:8px;
background:url(img/v_bg.gif) no-repeat;
}
.v_content ul li a {
display:block;
width:128px;
height:80px;
overflow:hidden;
}
.v_content ul li img {
width:128px;
height:96px;
}
.v_content ul li h4 {
width:128px;
height:18px;
overflow:hidden;
margin-top:12px;
font-weight:normal;
}
.v_content ul li h4 a {
display:inline !important;
height:auto !important;
}
.v_content ul li span {
color:#666;
}
.v_content ul li em {
color:#888;
font-family:Verdana;
font-size:0.9em;
}
</style>
<script type="text/javascript">
$(function(){
var page = 1;
var i = 4;
$("span.next").click(function(){
var $parent = $(this).parents("div.v_show");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i);
if(!$v_show.is(":animated")){
if(page == page_count){
$v_show.animate({ left : "0px"} , "slow");
page = 1;
}else{
$v_show.animate({ left : "-=" + v_width }, "slow");
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
});
$("span.prev").click(function(){
var $parent = $(this).parents("div.v_show");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i);
if(!$v_show.is(":animated")){
if(page == 1){
$v_show.animate({ left : "-="+v_width*(page_count-1)} , "slow");
page = page_count;
}else{
$v_show.animate({ left : "+=" + v_width }, "slow");
page--;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
});
})
</script>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="change_btn">
<span class="prev">上一页</span>
<span class="next">下一页</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li>
<a href="#"><img src="img/01.jpg" alt="海贼王" /></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span>
</li>
<li>
<a href="#"><img src="img/01.jpg" alt="海贼王" /></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span>
</li>
<li>
<a href="#"><img src="img/01.jpg" alt="海贼王" /></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span>
</li>
<li>
<a href="#"><img src="img/01.jpg" alt="海贼王" /></a>
<h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span>
</li>
<li>
<a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>222,276</em></span>
</li>
<li>
<a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>222,276</em></span>
</li>
<li>
<a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>222,276</em></span>
</li>
<li>
<a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a>
<h4><a href="#">哆啦A梦</a></h4><span>播放:<em>222,276</em></span>
</li>
<li>
<a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>22,276</em></span>
</li>
<li>
<a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>22,276</em></span>
</li>
<li>
<a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>22,276</em></span>
</li>
<li>
<a href="#"><img src="img/03.jpg" alt="火影忍者" /></a>
<h4><a href="#">火影忍者</a></h4><span>播放:<em>22,276</em></span>
</li>
<li>
<a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
<h4><a href="#">龙珠</a></h4><span>播放:<em>88,276</em></span>
</li>
<li>
<a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
<h4><a href="#">龙珠</a></h4><span>播放:<em>88,276</em></span>
</li>
<li>
<a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
<h4><a href="#">龙珠</a></h4><span>播放:<em>88,276</em></span>
</li>
<li>
<a href="#"><img src="img/04.jpg" alt="龙珠" /></a>
<h4><a href="#">龙珠</a></h4><span>播放:<em>88,276</em></span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
图片素材
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
![btn_cartoon.gif](https://img-blog.csdn.net/20160418124811453)