jQuery简单动画

来源：互联网发布：java设置二维数组编辑：程序博客网时间：2024/06/02 06:39
<!doctype html><html><head><meta charset="utf-8"><title>jQuery动画</title><script src="../websites/jquery-3.1.0.min.js"></script><link rel="stylesheet" href="style.css"></head><body><button id="btn">启动</button><p></p><div class="demo1"></div></body></html><script>$().ready(function(e) {  $('#btn').click(function(){$('.demo1').toggle(2000);//toggle方法是不断改变元素宽度、高度和透明度来实现隐藏和显示})          $('#btn').click(function(){$('.demo1').fadeToggle(2000);//fade方法是不断改变元素的透明度来实现隐藏和显示})  $('#btn').click(function(){   $('.demo1').slideToggle('slow');//slide方法是不断改变元素的高度来实现隐藏和显示   })//自定义动画:animate(params,speed,easing,callback)方法$('#btn').click(function(){$('.demo1').show();}).click(function(){$('.demo1').animate({'top':'+=10px','left':'+=500px','height':'200px'},3000);})//对于无法进行排队动画的方法，可以放到animate最后一个参数callback中，例如动画执行完毕变化css样式$('#btn').click(function(){$('.demo1').show();$('.demo1').animate({'left':'+=300px','height':'+=100px','opacity':'1'}).animate({'top':'+=300px','width':'+=200px'},function(){$(this).css('border','5px solid blue');}).fadeOut('slow');})//停止动画和判断是否处于动画状态//停止动画：stop([clearQueue],[gotEnd])方法:两个参数都是布尔值，clearQueqe代表是否清空未执行玩的动画队列，gotEnd代表是否将正在执行的动画跳到末状态//判断是否处于动画状态：$('#id').is(':animated')//延迟动画：$('#btn').click(function(){$('.demo1').show();$('.demo1').animate({'left':'+=300px','height':'+=100px','opacity':'0.5'},3000).delay(5000);})//fadeTo方法：只改变元素的透明度$('#btn').click(function(){$('.demo1').show();$('.demo1').fadeTo(1200,'0.5',function(){ $(this).css('border','2px solid green');})})});</script>
0 0