abstract:动画案例 .mian{
float: left;width: 200px;height: 240px;margin: 20px;
}
.box1, .box2 ,.box3,.box4,.box8,.box10,.box13{
width: 200px;height: 200px;background: pink;
}
.box11{
background: #ccc;width: 200px;height: 200px;position: absolute;
}
button{
width: 200px;height: 40px;border: none;
}
.clear{
clear: both;
}
$(document).ready(function(){
$('.box1').hide()
$('.bt1').click(function(){
$('.box1').fadeIn(3000)
})
$('.bt2').click(function(){
$('.box2').fadeOut(3000)
})
$('.bt3').click(function(){
$('.box3').fadeToggle()
})
$('.bt4').click(function(){
$('.box4').fadeTo(1000,0.3)
})
$('.btn5').click(function(){
$('.p5').slideUp()
})
$('.p6').hide()
$('.btn6').click(function(){
$('.p6').slideDown()
})
$('.btn7').click(function(){
$('.p7').slideToggle()
})
$('.btn8').click(function(){
$('.box8').show()
})
$('.btn9').click(function(){
$('.box8').hide()
})
$('.btn10').click(function(){
$('.box8').toggle()
})
$('.right').click(function(){
$('.box11').animate({left:'+500px'},3000)
})
$('.stop').click(function(){
$('.box11').stop()
})
$('.btn12').click(function(){
$('.box13').animate({
height:'400px',
width:'400px',
opacity:'0.3',
},1500)
})
})
淡入淡出
滑动
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
jQuery的滑动是通过高度的变化(向某个方向增大或者缩小)来动态的显示所匹配的元素
显示与隐藏
自定义动画
动画函数
字体放大
Correcting teacher:天蓬老师Correction time:2019-08-27 09:15:32
Teacher's summary:jQuery中的自定义动画操作, 非常的简单, 也有意思, 运用巧妙可以做出许多酷炫的效果