javascript-jquery对象的动画处理

Posted 2020-09-01 我叫大王来巡山

一、显示与隐藏动画效果

1.hide(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数)；

　　$("p").hide(5000,"swing",function(){语句体})；

2.show(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);

　　$("p").show(5000,"swing",function(){语句体})；

3.toggle(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);切换当前的显示/隐藏状态。

　　$("p").toggle("slow");

二、淡入与淡出动画效果

fadeOut(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);

　　方法：改变当前元素的不透明度，最终显示当前元素。

　　$("p").fadeOut("slow");

2.fadeIn(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);

　　方法：改变当前元素的不透明度，最终隐藏当前元素。

　　$("p").fadeIn("slow");

3.fadeToggle(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);

　　方法：切换当前元素的不透明度

　　$("p").fadeoggle("slow");

4.fadeTo()方法：把当前元素调整到指定不透明度

　　$("p").fadeTo("slow",0.5);

三、划入与划出效果

1.slideUp(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);

　　方法：动态改变当前元素的高度，最终隐藏当前元素，此时display：none；

　　$("p").slideUp("slow");p元素0.6秒内发生划出。

2.slideDown(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);

　　方法：改变当前元素的高度，最终显示当前元素。

　　$("p").slideDown("slow");//p元素0.6秒内发生划入

3.slideToggle(动画持续时间,easing用来指定切换效果，动画执行完毕调用函数);

　　方法：切换当前元素的高度。

　　$("p").slideToggle();0.4秒内切换

四、自定义动画效果

1.animate()：方法改变当前元素的个中css属性。

　　语法：animate({需要改变的属性：值}，动画持续时间，easing用来切换效果，动画执行效果完毕调用函数)；

　　$("p").animate({"width":"200px"},narmal);

　　$("p").anmiate({"left":"+=300px"});

2.延迟动画队列

　　语法：delay(动画时间)；可以是slow、normal、fast

　　$("p").delay(1000).animate({"left":"300px"}).animate({"height":"100px"});//

　　　　-延迟1秒后，p元素在0.4秒内向右使得CSS属性left值为300px。然后p元素在0.4秒内放大高度为100px。

3.中止动画队列

　　语法：stop(是否要清空未执行完的动画队列，是否直接将正在执行的动画跳转到末状态);两个参数的默认值均是false;