文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>Jquery中的效果

Jquery中的效果

时间:2011-04-26  来源:dezi

1.加载方法
$(document).ready()与window.onload()函数的比较
$(document).ready()是在dom完全就绪时调用,并不意味着所有关联的文件都已经下载
window.onload()是所有关联的元素都已经下载完毕
Juery中的onload()方法与window.onload()相同
2.show():显示隐藏的匹配元素。
可选参数
duration一个字符串或者数字决定动画将运行多久。
callback在动画完成时执行的函数。
easing一个用来表示使用哪个缓冲函数来过渡的字符串。
<p style="display: none">Hello</p>
$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });
3.hide():以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。
可选参数
duration一个字符串或者数字决定动画将运行多久。
callback在动画完成时执行的函数。
easing一个用来表示使用哪个缓冲函数来过渡的字符串。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });
4.toggle():切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
可选参数
duration一个字符串或者数字决定动画将运行多久。
callback在动画完成时执行的函数。
duration一个字符串或者数字决定动画将运行多久。
easing一个用来表示使用哪个缓冲函数来过渡的字符串。
callback在动画完成时执行的函数。
showOrHide一个布尔值指示是否显示或隐藏的元素。
$("p").toggle("fast",function(){
     alert("Animation Done.");  
});
toggle(switch):根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。
如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。
<p>Hello</p><p style="display: none">Hello Again</p>
var flip = 0;   
$("button").click(function () {
        $("p").toggle( flip++ % 2 == 0 );   
});
5.fadeIn(speed,[callback]):通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut(speed,[callback]):通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
$("p").fadeOut("fast",function(){
   alert("Animation Done.");
 });
fadeTo(speed,opacity,[callback]):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
可选参数
duration一个字符串或者数字决定动画将运行多久。
opacity一个0至1之间表示目标透明度的数字。
callback在动画完成时执行的函数。
duration一个字符串或者数字决定动画将运行多久。
opacity一个0至1之间表示目标透明度的数字。
easing一个用来表示使用哪个缓冲函数来过渡的字符串
callback在动画完成时执行的函数。
$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });
6.slideDown(speed,[callback]):通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
slideUp(speed,[callback]):通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
slideToggle(speed,[callback]):通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
可接受参数:
duration一个字符串或者数字决定动画将运行多久。
callback在动画完成时执行的函数。
duration一个字符串或者数字决定动画将运行多久。
easing一个用来表示使用哪个缓冲函数来过渡的字符串。
callback在动画完成时执行的函数。
$("p").slideToggle("fast",function(){
   alert("Animation Done.");
 });
7.animate(params,options):用于创建自定义动画的函数
可选参数
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

options (Options) : 一组包含动画选项的值的集合。
  选项中可以包括
    duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值
    easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
    complete (Function) : 在动画完成时执行的函数
    step (Callback) :
    queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列
    specialEasing:一组一个或多个通过相应的参数和相对简单函数定义的CSS属性
例如:
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。
第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#go1").click(function(){
  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});
$("#go2").click(function(){
  $("#block2").animate( { width: "90%"}, 1000 )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});
8.stop(stop([clearQueue],[gotoEnd])):停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
// 开始动画
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
  $(".block").stop();
});
9.delay(duration,[queueName]):设置一个延时来推迟执行队列中之后的项目。
参数
duration (Integer) :延时时间,单位:毫秒
queueName (可选) (String) :队列名词,默认是Fx,动画队列。
示例
在.slideUp() 和 .fadeIn()之间延时800毫秒。
<div id="foo">    
jQuery 代码:
$('#foo').slideUp(300).delay(800).fadeIn(400);
10.jQuery.fx.off:关闭页面上所有的动画。
jQuery.fx.off = true;
11.jQuery.fx.interval 返回: Number,该动画的频率(以毫秒为单位)。
这个属性可以被操作,以调整它的动画每秒运行帧数。默认是13毫秒。修改为一个较小的数字可能使动画在更快浏览器(如Chrome)中运行更流畅,但这样做有可能影响性能。

相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载