效果
1.基本效果
    1.1 show([speed,[easing],[fn]]) 如果元素本身是可见的,则不对其作任何改变。如果元素是隐藏的,则使其可见。
        $("p").show("slow","linear",function(){alert("显示完全")});
        $("p").show(1000,"swing",function(){alert("显示")})
    1.2 hide([speed,[easing],[fn]]) 如果元素本身是不可见的,则不对其作任何改变。如果元素是可见的,则将其隐藏。
        $("p").hide("slow","linear",function(){alert("隐藏")});
        $("p").hide(1000,"swing",function(){alert("隐藏")});
    1.3 toggle([speed],[easing],[fn]) 如果元素当前是可见的,则将其隐藏;如果元素当前是隐藏的,则使其显示
        $("p").toggle(true); 显示元素
        $("p").toggle(false); 隐藏元素
        $("p").toggle(1000,function(){alert("转换完毕")});
2.滑动效果
    2.1 slideDown([speed],[easing],[fn]) 元素可见区域的高度从0逐渐增大到其原有高度(向下逐渐展开)。
        $("p").slideDown(1000,function(){alert("显示")});
    2.2 slideUp([speed],[easing],[fn]) 元素可见区域的高度从原有高度逐渐减小到0(向上逐渐收起)
        $("p").slideUp(1000,function(){alert("隐藏")});
    2.3 slideToggle([speed],[easing],[fn]) 如果元素当前是可见的,则将其隐藏(向上滑动);如果元素当前是隐藏的,则使其显示(向下滑动)。
        $("p").slideToggle(1000,function(){alert("切换")});
3.淡入淡出效果
    3.1 fadeIn([speed],[easing],[fn]) 元素的不透明度的比例从0%逐渐增加到100%。
        $("p") .fadeIn(1000,function(){alert("显示")});
    3.2 fadeOut([speed],[easing],[fn]) 元素的不透明度的比例从100%逐渐减小到0%。
        $("p").fadeOut("slow");
    3.3 fadeTo([[speed],opacity,[easing],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
        $("p").fadeTo("fast",0.8);
        $("p").fadeTo(2000,0.5,function(){alert("显示到一定的透明度")});
    3.4 fadeToggle([speed,[easing],[fn]]) 如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
        $("p").fadeToggle(1000,function(){alert("切换")});
4.自定义动画
    4.1 animate(params,[speed],[easing],[fn]) 执行一个基于css属性的自定义动画。你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画。
        color、background-color无法用于动画(除非使用jQuery.Color()插件)
        css属性值也可以是相对的,你可以为属性值加上前缀"+="或"-=",以便于在原来的属性值上增加或减少指定的数值。
        所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
        $("p").animate({height:"
+=100px",marginLeft:"300px"},2000);    $("p").animate({height:'toggle',opacity:0.9},1000,function(){alert("自定义动画")});
    4.2 stop() 停止当前匹配元素上正在运行的动画。
        $("p").stop(); 停止当前动画,不清空队列
        $("p").stop(true); 停止当前动画,清空队列(停止全部)
    4.3 delay(time) 队列中等待执行的下一个动画延迟指定的时间后才执行
        $myDiv.fadeOut( "slow" )
        .delay( 2000 )
        .slideDown( 1000 )
        执行完fadeOut()后,等待2s,执行slideDown()
    4.4 finish() 用于立即完成队列中的所有动画。finish()会停止当前正在运行的动画,删除所有队列中的动画,并完成匹配元素的所有动画。
        .finish()方法和.stop(true, true)很相似,.stop(true, true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
        $("p").finish();
5.设置
    5.1 jquery.fx.off 属性用于设置或返回是否全局性地禁用所有动画。如果将该属性设为true,将全局性地禁用所有动画。所有正在执行的动画队列不会受到影响。尚未执行的任何动画队列都会在执行时立即完成,而不再带有动画效果。
        if( $.fx.off ){
            jQuery.fx.off = false; // 启用动画效果
            this.value = "禁用动画效果";
        }else{
            $.fx.off = true; // 禁用动画效果
            this.value = "启用动画效果";
        }
  
 5.2 jQuery.fx.interval
属性用于设置或返回动画的帧速(毫秒值)。jQuery.fx.interval属性用于设置jQuery动画每隔多少毫秒绘制一帧图像(触发一次样式更
改,浏览器可能会重新绘制当前页面)。该值越小,则动画的触发次数越多,动画效果也更明显、更平滑,当然也就越耗费性能。
更改该属性值时,正在执行的动画队列将不受影响。尚未执行的任何动画队列都将按照更改后的帧速来绘制动画效果。
        // 更改帧速
        $("select").change( function(){
            $.fx.interval = this.value; // 设置帧速
        } );

jquery 效果的更多相关文章

  1. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  2. jQuery 效果 —— 滑动

    jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...

  3. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  4. jQuery 效果函数

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  5. JQuery: JQuery效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  6. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  7. Jquery效果代码--(二)

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

  8. jQuery 效果方法

    jQuery 效果方法 下面的表格列出了所有用于创建动画效果的 jQuery 方法. 方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被 ...

  9. jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

  10. Ajax或JS动态添加的元素,Jquery效果不起作用

    问题: 最近在做一个Ajax分页的功能,遇到一个问题 一开始jquery效果是可用的,但是,ajax执行一次之后,jquery效果就无效了. 解决办法: 可以添加live事件来解决 W3C关于live ...

随机推荐

  1. 关于yuv 的pack(紧缩格式)和planner(平面格式)格式 [转]

    关于yuv 格式 YUV 格式通常有两大类:打包(packed)格式和平面(planar)格式.前者将 YUV 分量存放在同一个数组中,通常是几个相邻的像素组成一个宏像素(macro-pixel);而 ...

  2. 近5年133个Java面试问题列表

    Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试,但是现在问题变得越来越高级,面试官问的问题也更深入. 在我 ...

  3. jquerymobile-可折叠内容(Collapsible content)

    可能我们在开发中遇到过这样的问题,我们只是看到一个题目或者简单的介绍,然后一点击会在下面展开对应的详细的内容.在jqm中实现这个效果很简单.下面给出一段例子代码: <!DOCTYPE html& ...

  4. android中数据存储

    android中数据存储     Android 中存储数据的方式有五种:SQLite数据库.文件存储.内容提供者.网络.SharedPreferences(Key----value)五种存储方式. ...

  5. (求助大牛)关于vs2010上的AVS代码bug问题~~

    问题1:就是解码端,出现错误,找到bug所在地了,见下图: memcpy出错了,跳到下图了.可是错误显示的我不懂,求解释一下就ok了,小女子在此谢过了~~哎,调bug的能力弱爆了!! 大家看看吧~~是 ...

  6. Btrace

    http://www.iteye.com/topic/1005918 背景 周五下班回家,在公司班车上觉得无聊,看了下btrace的源码(自己反编译). 一些关于btrace的基本内容,可以看下我早起 ...

  7. Apache Kafka: Next Generation Distributed Messaging System---reference

    Introduction Apache Kafka is a distributed publish-subscribe messaging system. It was originally dev ...

  8. android中的样式和主题

    有的时候我们一个页面要用很多个textview,而且这些textview的样式非常相像,这种情况下我们可以把这些样式抽取出来,然后在每个textview中引用即可,这样修改起来也方便. 我们来看一个简 ...

  9. Java基础知识强化之IO流笔记35:InputStreamReader(Reader字符流的子类)2种read数据方式

    1. InputStreamReader(Reader字符流的子类)2种read数据方式: InputStreamReader的read方法: int read():一次读取一个字符 int read ...

  10. Java基础知识强化之网络编程笔记07:TCP之服务器给客户端一个反馈案例

    1. 首先我们搭建服务器端的代码,如下: package cn.itcast_07; import java.io.IOException; import java.io.InputStream; i ...