摘要：第一章 jQuery显示/隐藏 hide() 隐藏显示的元素 书写格式：hide([speed][sesing] [fn]) show() 显示隐藏的元素 书写格式：show([speed][sesing] [fn]) speed:显示过程的速度 速
第一章 jQuery显示/隐藏
hide() 隐藏显示的元素
书写格式：hide([speed][sesing] [fn])
show() 显示隐藏的元素
书写格式：show([speed][sesing] [fn])
speed:显示过程的速度 速度是毫秒值
sesing:指定切换的效果
fn:动画完成时执行的一个函数html>
jQuery显示/隐藏
div,p{width: 200px;height: 200px;background: red;margin: 10px 0;color: #fff;}
$(document).ready(function(){
$('#bt1').click(function(){
$('p').hide('2000')
})
$('#bt2').click(function(){
$('p').show('2000')
})
})
点击隐藏
点击显示
红玫瑰与白玫瑰
朱砂痣与白月光
第二章 jQuery的滑动
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
slideDown([speed] [fn])通过高度的变化，向下增大的动态效果 下滑效果
speed:下滑显示过程的速度 英文值或者毫秒
fn:动画完成时执行是函数html>
jQuery滑动
$(document).ready(function(){
$('.p1').hide()
$('.bt1').click(function(){
$('.p1').slideDown(777)
})
$('.bt2').click(function(){
$('.p2').slideUp(777)
})
$('.bt3').click(function(){
$('.p3').slideToggle(777)
})
})
下滑
With this hand
I'll left from sorrows
Your cup will never empty
上滑
You'll be fine
Don't worry
you will be fine
切换
For I will be your wine
With this candle
I'll ligth your darkness
slideUp([speed] [fn]) 通过高度的变化，向上减小的动态效果 上滑效果
speed:上滑显示过程的速度 英文值或者毫秒
fn:动画完成时执行是函数
slideToggle([speed] [fn])通过高度的变化来切换元素的可见性
speed:上滑隐藏/下滑显示 过程的速度 英文值或者毫秒
fn:动画完成时执行是函数
第三章 jQuery淡入淡出
jQuery是通过控制不透明度的变化来控制匹配到的元素的淡入淡出效果
fadeIn([speed] [fn]) 通过不透明度的变化来实现匹配到元素的淡入的效果;
fadeOut([speed] [fn])通过不透明度的变化来实现匹配到元素的淡出的效果;
fadeToggle([speed] [fn]) 通过不透明度的变化来开关所有匹配元素的淡入淡出效果;
fadeTo([speed] opacity [fn]) 把所有匹配到元素的不透明度以渐进发方式调整到指定的不透明度;
// speed:规定效果的时长
fn:动画完成时执行是函数
opacity：fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度(值介于0与1之间)
jQuery淡入淡出
.main{height: 240px;width: 200px;margin-right: 20px;float: left;}
.box1{height: 200px;width: 200px;background: yellowgreen;}
.box2{height: 200px;width: 200px;background: pink;}
.box3{height: 200px;width: 200px;background: blue;}
.box4{height: 200px;width: 200px;background: red;}
button{height: 40px;width: 200px;border:none;}
$(document).ready(function(){
$('.box1').hide()
$('.bt1').click(function(){
$('.box1').fadeIn(777)
})
$('.bt2').click(function(){
$('.box2').fadeOut(777)
})
$('.bt3').click(function(){
$('.box3').fadeToggle(777)
})
$('.bt4').click(function(){
$('.box4').fadeTo(777,0.5)
})
})
淡入
淡出
切换
切换
第四章 自定义动画
jQuery中我们使用 animate()方法创建自定义的动画
语法:$(selector).animate({params},speed,fn);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 fn是动画完成后所执行的函数html>
jQuery自定义动画
div{width: 100px;height: 100px;background: yellowgreen;position: absolute;}
$(document).ready(function(){
$('#bt1').click(function(){
$('em').animate({fontSize:'37px'},1777)
})
$('#bt2').click(function(){
$('div').animate({
left:'377',
opacity:'0.77',
width:'toggle',
height:'toggle'
},1777)
})
})
点击字体放大
可口可乐
点击移动div
停止动画：
stop() 方法用于停止动画或效果，在它们完成之前； 该方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
语法:
$(selector).stop(stopAll,goToEnd)
可选的参数 stopAll 规定是否应该清除动画队列。默认是 false 仅停止活动的动画，允许任何排入队列的动画向后执行
可选的参数 goToEnd 规定是否立即完成当前动画。默认是 false
默认情况下 stop() 会清除在被选元素上指定的当前动画html>
.box1{position: absolute;background-color: pink;}
$(document).ready(function(){
$('#right').click(function(){
$('.box1').animate({
left:'600px',
fontSize:'37px',
fontWeight:'bold'
},2777)
})
$('#stop').click(function(){
$('.box1').stop()
})
})
右移
停止
XXXTENTACION
批改老师：韦小宝批改时间：2019-01-23 11:42:09
老师总结：写的很棒 总结注释的都很清楚 jQuery中可以实现很多的动画效果 课后没事多练习练习 继续加油吧