1. jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

实例:

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

2. jQuery fadeOut() 方法用于淡出可见元素。

语法:

$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

实例:$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

4.。语法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。实例

$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});

5. jQuery slideDown() 方法用于向下滑动元素。

语法:

$(selector).slideDown(speed,callback);

$("#flip").click(function(){
  $("#panel").slideDown();
});

6. jQuery slideUp() 方法用于向上滑动元素。

语法:

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

7. jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

8. jQuery animate() 方法用于创建自定义动画。

语法:

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

也可以定义一组animate,实现队列功能。

下面的例子演示 animate() 方法的简单应用;它把 <div> 元素移动到左边,直到 left 属性等于 250 像素为止:

实例

$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

9. jQuery stop()方法用于停止动画或效果,在它们完成之前

10.当动画 100% 完成后,即调用 Callback 函数。

典型的语法:

$(selector).hide(speed,callback)

11. jQuery 方法链接

有些元素只要获取一遍就可以,所以可以利用链接对方法追加。

就是方法点方法。如

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery一些常用特效方法使用实例的更多相关文章

  1. [总结]jQuery之常用函数方法参考手册

    w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...

  2. jquery中动画特效方法

    基本特效 方法:                  说明 .show()              显示选中的元素 .hide()                隐藏选中的元素 .toggle()   ...

  3. Jquery一些常用的方法

    整理以前的笔记,在学习JavaScript时候,经常会用到一些方法,但是有时忘掉了具体用法,因此记下.方便以后查阅. 这篇博文先说明这些方法的用途: removeClass().remove().cs ...

  4. jquery中常用的方法和注意点

    1.通过js获取url中的参数值 //通过参数名称name获取url参数function GetQueryString(name) { var reg = new RegExp("(^|&a ...

  5. jquery,js常用特效名称

  6. JS常用特效方法总结

    1.按Ctrl提交 <body onkeydown="if(event.ctrlKey&&event.keyCode=='13') form1.submit.click ...

  7. JS常用数组方法及实例

    1.join(separator):将数组的元素组起一个字符串,以separator为分隔符 ,,,,]; var b = a.join("|"); //如果不用分隔符,默认逗号隔 ...

  8. Jquery的常用使用方法

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']: ...

  9. jQuery常用工具方法

    前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...

随机推荐

  1. WIN8+VS2013编写发布WCF之二(部署)

    上文简介了如何建立WCF工程并且调试,下面说一下如何部署. 本文将陆陆续续讲述三种部署方式,随着项目的进展将不断补全. 声明: 用管理员身份打开VS2013,发布前请将程序的.net版本改成与服务器相 ...

  2. 在MAC OS 下配置python + Flask ,并支持pyCharm编辑器

    原创咯- flask是一个micro framework ,伸缩性很强.可以部署到openshift 的PAAS里.这个框架上手非常快.喜欢的可以试试. 若实在MAC里,python已经默认安装了.1 ...

  3. Laravel5.1控制器小结

    控制器一般存放在app\Http\Controllers目录下,所有Laravel控制器都应继承基础控制器类. 基础控制器 基础控制器例子: <?php namespace App\Http\C ...

  4. DB2建立不记录日志的表

    )); ,'JACK'); ,'Timo'); -----建立无日日志表 --方法一:(表存在) CREATE TABLE TB_7 LIKE TB_6 NOT LOGGED INITIALLY; - ...

  5. Java Collections Source Code Series 2 ---接口

    废话开篇 自己学完Java Collections框架之后,其中的一个较大的收获就是接口对于层次的重要性.Java Collections的最终实现至少有几十个,其中很多都有非常相似的功能(metho ...

  6. Android 编译使用高版本的Java

    讨论的链接 http://bbs.csdn.net/topics/390977000 问题很容易解决,就是sdk\tools\ant\build.xml里面的配置不对,把 <property n ...

  7. ajax & jsonp & img

    ajax 是一种请求服务器的方式,核心是XMLHttpRequest对象: 优点是无需刷新页面, 缺点是不能跨域请求. /* * Ajax direacted by Zakas * * Ajax.ge ...

  8. [译] Swift 的响应式编程

    原文  https://github.com/bboyfeiyu/iOS-tech-frontier/blob/master/issue-3/Swift的响应式编程.md 原文链接 : Reactiv ...

  9. jQuery插件实例一:年华时代插件Alert对话框

    在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大.在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升.个人认为与 ...

  10. QWidget设置为模态问题

    设置QWidget的Qt::WindowModality属性为Qt::WindowModal和Qt::ApplicationModal,发现窗体仍然不会模态,网上查了一下,有人说改属性只对window ...