php动画效果,动画效果总结

摘要：

       动画效果总结    

.main{width:100px;height: 100px;margin: 20px 20px;float:left;}

.fadein,.fadeout,.fadetoggle,.fadeto{width:100px;height:100px;background: blue; }

.bt1,.bt2,.bt3,.bt4{height:40px;width:100px;margin-top: 10px;}

div{width:100px;height:100px;background: red;position: absolute;}

$(document).ready(function(){

//显示隐藏

/* $('.hide').click(function(){

$('p').hide(1500)

})

$('.show').click(function(){

$('p').show(1500)

})*/

//淡入淡出

/*$('.fadein').hide()

$('.bt1').click(function(){

$('.fadein').fadeIn(3000)

})

$('.bt2').click(function(){

$('.fadeout').fadeOut(3000)

})

$('.bt3').click(function(){

$('.fadetoggle').fadeToggle(3000)

})

$('.bt4').click(function(){

$('.fadeto').fadeTo(3000,0.1)

})*/

//动画效果

$('#right').click(function(){

$('.box1').animate({left:'+500px',

opacity:'0.3',

height:'200px',

width:'200px'},3000)

$('.box1').animate({fontSize:'20px'})

})

$('#stop').click(function(){

$('.box1').stop()

})

})

右移

停止

php中文网

理解：整体布局时，尺寸比较难把握。