jquery的动画效果

序言：昨天复习了jQuery的一些事件，今天我打算继续来复习jQuery的动画效果。

用于写一些网页特效:渐变菜单，渐变显示，图片轮播等。

首先当然得引入插件：<script src="jquery/jquery-1.11.1.js"></script>

 

1.简单的HTML代码

<input type="button" value="show" id="btn1"/>
<input type="button" value="hide" id="btn2"/>
<input type="button" value="按钮切换" id="toggle"/>
<input type="button" value="slideup" id="btn3"/>
<input type="button" value="slidedown" id="btn4"/>
<input type="button" value="slidedtoggle" id="btn5"/>
<input type="button" value="fadein" id="btn6"/>
<input type="button" value="fadeout" id="btn7"/>
<input type="button" value="fadetoggle" id="btn8"/>
<input type="button" value="fadeto" id="btn9"/></br>
<input type="button" value="animate" id="btn10"/>
<input type="button" value="stop" id="stop"/>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>

 

2.关键的jQuery代码：

实例+注释

<script>
// 一： show()显示，hide()隐藏；还可以传递一个参数来控制事件
//除了直接用毫秒来来控制速度以外，还能用参数字符串来控制
//分别是slow（）600毫秒；normal()400毫秒；fast（）200毫秒来控制；
//如果参数传递错误或是为空，默认的速度都是400毫秒；
$('#btn1').click(function(){
$('.div1').show(1000).hide('slow');
});
$('#btn2').click(function(){
$('.div2').hide(1000).show('fast');
 });

//队列动画，使用函数名调用自身；
$('#btn1').click(function(){
$('div').first().show('slow',function showdiv(){
$(this).next().hide('slow',showdiv);
 }) ;
 });

//队列动画，使用arguments.callee

('#btn2').click(function(){
$('div').last().hide('slow',function(){
$(this).prev().show('slow',arguments.callee);
}) ;
});

//按钮切换操作toggle();
$('#toggle').click(function(){
$('this').toggle('slow');
}

 

//二：滑动，卷动
//slideup()向上卷动,收缩；slidedown()向下展开 ,滑动；slidetoggle()
$('#btn3').click(function(){
$('.div3').slideUp();
})

$('#btn4').click(function(){
$('.div1').slideDown();
})

$('#btn5').click(function(){
$('.div5').slideToggle();
})

//淡入，淡出。。。。
//fadein()淡入；fadeout()淡出；fadetoggle()自动淡入淡出；专门用于透明度变化的方法。
//透明度变化值在0——100或者是1000——0；不能自己写值
$('#btn6').click(function(){
$('.div1').fadeIn('slow');
})
$('#btn7').click(function(){
$('.div5').fadeOut('slow');
})
$('#btn8').click(function(){
$('.div1').fadeToggle('slow');
})

为了解决上述问题，jquery专门提供了fadeTo()方法；
$('#btn9').click(function(){
$('.div1').fadeTo('slow',0.5);
})

//自定义动画
//固定不动的动画
$('#btn10').click(function(){
 $('.div5').animate({
 'width':"200px",
'height':"200px",
'backgroundColor':"red",
'opacity':"0.5"
 },1000,
function(){
alert("动画执行完成！！")
 })
})

//动起来的动画
$('#btn10').click(function(){
$('.div5').animate({
'top':"300px",
'left':"+=100px"
},1000);
});

$('.div5').slideUp('slow').slideDown('slow').css('background','orange');

//queue意思是执行下一个函数动画
$('.div5').slideUp('slow').slideDown('slow').queue(function(){
$(this).css('background','orange');
$(this).dequeue() ;
}).hide('slow');

//清理列队动画的方法clearqueue（）；

//stop（clearqueue,gotoEnd)停止正在进行的动画
//两个参数，第一个参数结果是 一个布尔值，表示是否清空未执行完的动画；
//第二个参数表示是否将正在执行的动画调整到末状态。
$('#btn10').click(function(){
$('.div5').delay(1000).animate({'top':"300px"},1000);
$('.div5').animate({'left':"500px"},1000);
$('.div5').animate({'width':"300px"},1000);
$('.div5').animate({'height':"300px"},1000);
});
 $('#stop').click(function(){
 $('.div5').stop(true,false);
})

 

//delay（）在动画之前，或者是中间加上延迟；
//动画的全局属性
//$.fx.interval可以改变动画执行的帧数，默认为13秒。越小越流畅；
//$.fx.off可以关闭掉所有的动画
$.fx.interval=1;
$('#btn10').click(function(){
$('.div5').toggle(7000)
})
</script>