28、Jquery页面效果

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體:   |    |    |  超大  

Jquery动画函数分为三类

基本动画函数

基本动画函数包括show(显示)、hide(隐藏)、toggle(切换)这三个函数。

例子所需html

<inputtype="button"value="点击"id="btn"/><divid="ts">这是一个提示</div>

show()

主要用来控制元素的显示,如果元素默认处于显示状态则不会发生任何改变。

$("#ts").show();//如果这个元素是隐藏的 则将其显示

该方法还提供了一个重载,可以实现动画效果慢慢显示,参数为毫秒。

$("#ts").show(400);//参数毫秒

可以在发生变化后执行回调函数

$("#ts").show(400,function(){

alert("执行完毕");//其他代码});

hide()

该方法对应show方法,意思是隐藏的意思。将页面上的元素进行隐藏,同样也有重载和回调函数。

$("#ts").hide();//将元素立即隐藏$("#ts").hide(400);//将元素缓慢隐藏 参数毫秒$("#ts").hide(400,function(){

alert("执行完毕");

});

toggle()

对于显示和隐藏提供了一个切换方法,如果隐藏则开启,否则则隐藏。

$("#btn").click(function(){

$("#ts").toggle(400,function(){

console.log("点击了一次");

});

});

滑动动画函数

滑动动画函数包括slideUp(滑动隐藏)、slideDown(滑动显示)、slideToggle(滑动开关)

slideDown()

就是滑动版的show方法,参数一样。

$("#ts").slideDown();//从上到下 滑动显示 滑动show

slideUp()

滑动版的hide方法。

$("#btn").click(function(){

$("#ts").slideUp(400);

});

slideToggle()

滑动版toggle方法。

$("#btn").click(function(){

$("#ts").slideToggle(400,function(){

console.log("点击了一次");

});

});

淡入淡出动画函数

淡入淡出函数包括:fadeOut()、fadeIn()、fadeToggle()、fadeTo(),效果为透明度慢慢变底或变高,使用方法同上。而fadeTo方法是渐变到给定的透明值。

fadeTo()

$("#btn").click(function(){

$("#ts").fadeTo(400,0.3);//渐变到给定的透明值(0~1)});

自定义动画函数

animate()

该方法用于将某个元素慢慢变为某个形式。

$("#ts").CSS("border","1px dashed #000").

css("width","100px").

animate({//操作css样式 逐渐变为该样式 样式名称Camel 命名法paddingLeft 不是padding-leftwidth:$(window).width() - 100,

height:$(window).height()- 100},1000);

stop()

stop()方法用于停止某个动画

$("#btn").click(function(){

$("#ts").stop();//立即停止动画$(":animated").stop();//停止所有动画});

一个鼠标移入移出例子

$("#btn").mouSEOver(function(){

$("#ts").animate({marginLeft:"1000px"},1000);

}).mouseout(function(){

$("#ts").animate({marginLeft:"0px"},1000);

});

另外有一个全局函数可以禁用所有页面的动画。

$.fx.off=true;//全局属性 禁用所有动画 false为启动$("ts").hide();

将该属性设置为true后,跟在后面的所有动画都不会执行。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航