jquery常用特效方法使用示例

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);

赞 (0)

相关推荐

  • 推荐10 个很棒的 jQuery 特效代码

    1.图片预加载     (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cache

  • jquery必须知道的一些常用特效方法及使用示例(整理)

    1.jQuery fadeIn() 用于淡入已隐藏的元素. 语法: $(selector).fadeIn(speed,callback); 实例: 复制代码 代码如下: $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);}); 2.jQuery fadeO

  • 15个款优秀的 jQuery 图片特效插件推荐

    15个款优秀的 jQuery 图片特效插件推荐

    这篇文章向大家推荐15个最佳 jQuery 图片效果插件.jQuery是最流行的Javascript框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片效果. 01. Responsive Image Gallery 02. Image Zoom Tour 03. Automatic Image Montage 04. 3D Image Slider 05. Shuffle Text E

  • 推荐9款炫酷的基于jquery的页面特效

    推荐9款炫酷的基于jquery的页面特效

    1.基于jquery实现的带按钮的图片左右滚动切换 jquery带按钮的图片滚动切换代码是一款jquery制作带按钮的图片左右滚动切换特效代码 在线演示 源码下载 2.基于jQuery的图片上下左右无缝连续循环滚动 imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动. 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 jquery实现的fixed固定层时间轴动态效果源码,

  • jquery常用特效方法使用示例

    1. jQuery fadeIn() 用于淡入已隐藏的元素. 语法: 复制代码 代码如下: $(selector).fadeIn(speed,callback); 实例: 复制代码 代码如下: $("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);});

  • jQuery常用数据处理方法小结

    本文实例总结了jQuery常用数据处理方法.分享给大家供大家参考.具体如下: $.trim():删除字符串前后的空白字符. var str = ' 薯条 '; var formatStr = $.trim(str); //'薯条' $.param():数组或者对象序列化. var obj = { name: 'dog', count: 10 }; var str = $.param(obj); //"name=dog&count=10" $.isArray():检测是否为数组.

  • jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】

    本文实例讲述了jQuery 常用特效.分享给大家供大家参考,具体如下: 显示与隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #content{display: none;} </

  • jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法: jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数 mouseenter()方法:鼠标进入一个元素触发的事件 mouseleave()方法:鼠标离开一个元素触发的事件 注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适 下面是代码对比: <div class="parent">    <div class=&qu

  • JQuery中queue方法用法示例

    本文实例讲述了JQuery中queue方法用法.分享给大家供大家参考,具体如下: jquery的queue方法 显示或操作在匹配元素上执行的函数队列 意思就是对匹配上的元素,显示作用在这个元素上的函数的个数,也就是上述所说的"显示",而操作则是更改这些作用在该元素上的函数队列 举个例子: <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; back

  • JQuery扩展对象方法操作示例

    本文实例讲述了JQuery扩展对象方法操作.分享给大家供大家参考,具体如下: 应项目需求,对JQuery进行了一个扩展,需求如下: 项目中需要在浏览器右下角提示操作错误和系统提示内容,并有滑动移出和关闭的效果,所以自己写了一个效果还可以的弹出框来.就是给JQuery添加了一个方法ShowMsg. 先上代码: $.fn.extend({ ShowMsg: function (width, height, msgTitle_, msgContent_) { var TopY = 0; //初始化元素

  • jquery的each方法使用示例分享

    对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用. 复制代码 代码如下: jQuery.prototype.each=function( fn, args ) {  return jQuery.each( this, fn, args ); } 让我们

  • Jquery常用的方法汇总

    //jQuery的优点 :  1 轻量级         2 强大的选择器         3 出色的DOM操作的封装         4 可靠的事件处理机制         5 完善的Ajax         6 不污染顶级变量         7 出色的浏览器兼容性         8 链式操作方式         9 隐式迭代         10 行为曾与结构层的分离         11 丰富的插件支持         12 完善的文档         13 开源 <script sr

  • jQuery ajax serialize() 方法使用示例

    .serialize() 方法创建以标准 URL 编码表示的文本字符串.它的操作对象是代表表单元素集合的 jQuery 对象. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

随机推荐