jQuery 效果

1.隐藏,显示

 1.1显示 hide() 和隐藏 show() 

  语法:$(selector).hide(speed,callback);

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

  例:<p>内容</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>    

    $(document).ready(function(){
      $("#hide").click(function(){
        $("p").hide();
      });
      $("#show").click(function(){
        $("p").show();
      });
    });

  可选的 speed 参数规定显示的速度和隐藏方式,可以取以下值:速度可以取"fast" 或毫秒,隐藏可以选择"slow"、"linear" 等

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

  例:<div>隐藏及设置回调函数</div>

    <button class="hidebtn">隐藏</button>

    $(document).ready(function(){
      $(".hidebtn").click(function(){
        $("div").hide(1000,"linear",function(){
          alert("Hide() 方法已完成!");
        );
      });
    });

 1.2 切换 toggle()

  语法: $(selector).toggle(speed,callback);

  可以使用 toggle() 方法来切换 hide() show() 方法。显示被隐藏的元素,并隐藏已显示的元素。

  例:<button>隐藏/显示</button>

    <p>内容</p>    

    $(document).ready(function(){
      $("button").click(function(){
        $("p").toggle();
      });
    });

  可选的 speed 参数规定显示的速度和隐藏方式,可以取以下值:速度可以取"fast" 或毫秒,隐藏可以选择"slow"、"linear" 等

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。    

  例:<div>隐藏及设置回调函数</div>
    <button class="hidebtn">隐藏或显示</button>  

    $(document).ready(function(){
      $(".hidebtn").click(function(){
        $("div").toggle(1000,"linear",function(){
          alert("toggle() 方法已完成!");
        });
      });
    });

2.淡入淡出 (jQuery 拥有下面四种 fade 方法)

 2.1 淡入已隐藏的元素fadeIn()  注意,fadeIn这里的I,是i的大写,不是L

  语法: $(selector).fadeIn(speed,callback);

  例:<button>点击淡入 div 元素。</button>

    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>    

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

 2.2 淡出可见元素fadeOut()

  语法:$(selector).fadeOut(speed,callback); 

  例:<button>点击淡出 div 元素。</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

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

 2.3 切换淡入、淡出 fadeToggle() 

  语法:$(selector).fadeToggle(speed,callback);  

  例:<button>点击淡入/淡出</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

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

 2.4渐变透明度 fadeTo()  (值介于 0 与 1 之间)。

  语法:$(selector).fadeTo(speed,opacity,callback); 在使用的时候speed参数和opacity是必须要有的  

  例:<button>点我让颜色变淡</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  

    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeTo("slow",0.15);
        $("#div2").fadeTo("slow",0.4);
        $("#div3").fadeTo("slow",0.7);
      });
    });

3.滑动

 3.1向下滑动元素 slideDown() 

  语法: $(selector).slideDown(speed,callback);

  例:#panel,#flip{ padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3;}

    #panel{ padding:50px; display:none;}

    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>

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

 3.2 向下滑动元素 slideUp()

  语法:$(selector).slideUp(speed,callback);

  例:#panel,#flip{ padding:5px; text-align:center;  border:solid 1px #c3c3c3;}

    #panel{ padding:50px; }

    <div id="flip">点我收起面板</div>
    <div id="panel">Hello world!</div>

    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideUp("slow");
      });
    });

 3.3 切换向下、向上滑动元素 slideToggle()

  语法: $(selector).slideToggle(speed,callback);

  例:#panel,#flip{ padding:5px; text-align:center;  border:solid 1px #c3c3c3;}

    #panel{ padding:50px; display:none;}

    <div id="flip">点击显示或隐藏面板。</div>
    <div id="panel">Hello world!</div>

    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideToggle("slow");

        //$("#panel").slideToggle(5000);毫秒的写法不用加引号
      });
    });

4.动画

 4.1 创建自定义动画 animate()

  语法: $(selector).animate({params},speed,callback); 必需带有 params 参数定义形成动画的 CSS 属性,其他参数可选。

  例:<button>开始动画</button>
    <p>默认情况下,所有的 HTML 元素有一个静态的位置,且是不可移动的。
    如果需要改变位置,我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute否则动画不生效</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> 

    $(document).ready(function(){            多个属性:$(document).ready(function(){
      $("button").click(function(){                  $("button").click(function(){
        $("div").animate({left:'250px'}, 5000);              $("div").animate({
      });                                  left:'250px',
    });                                    opacity:'0.5',

                                          height:'150px',

                                          width:'150px'

                                        },5000);

                                       });

                                     });

  几乎可以用 animate() 方法来操作所有 CSS 属性,但是要注意使用驼峰式

 4.2 使用相对值

  例:<button>开始动画</button>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

    $(document).ready(function(){
      $("button").click(function(){
        $("div").animate({
          left:'250px',
          height:'+=150px',
          width:'+=150px'
        },5000);
      });
    });

 4.3 使用预定义的值

  例:<button>开始动画</button>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

    $(document).ready(function(){
      $("button").click(function(){
        $("div").animate({
          height:'toggle'
        },5000);
      });
    });

 4.4使用队列功能

  例:<button>开始动画</button>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

   例1:

    $(document).ready(function(){
      $("button").click(function(){
        var div=$("div");
        div.animate({height:'300px',opacity:'0.4'},"slow");
        div.animate({width:'300px',opacity:'0.8'},"slow");
        div.animate({height:'100px',opacity:'0.4'},"slow");
        div.animate({width:'100px',opacity:'0.8'},"slow");
      });
    }); 

  例2:

    $(document).ready(function(){
      $("button").click(function(){
        var div=$("div");
        div.animate({left:'100px'},"slow");
        div.animate({fontSize:'50px'},"slow");
      });
    });

5.停止动画

  5.1 停止动画或效果 stop()  此方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

  语法: $(selector).stop(stopAll,goToEnd);

   stopAll 参数规定是否清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此默认地,stop() 会清除在被选元素上指定的当前动画。

  例:

  #panel,#flip{ padding:5px; text-align:center;  border:solid 1px #c3c3c3;}

  #panel{ padding:50px; display:none;}

  <button id="stop">停止滑动</button>
  <div id="flip">点我向下滑动面板</div>
  <div id="panel">Hello world!</div>

  例1(不带参数,不写默认是fslse)                     例2:(带参数 true)

  $(document).ready(function(){             $(document).ready(function(){
    $("#flip").click(function(){                $("#flip").click(function(){
      $("#panel").slideDown(5000);               $("#panel").slideDown(5000); 

      $("#panel").slideUp(5000);                $("#panel").slideUp(5000);                 
    });                            });
    $("#stop").click(function(){                $("#stop").click(function(){
      $("#panel").stop();                    $("#panel").stop(true);
    });                            });
  });                           });

  停止当前的动画,但是会继续后面执行队列的动画          停止执行所有的队列动画

            例3:(带有 goToEnd 参数)      

            $(document).ready(function(){ 
              $("#flip").click(function(){ 
                $("#panel").slideDown(5000);  

                $("#panel").slideUp(5000); 
              });
              $("#stop").click(function(){
                $("#panel").stop(true,true);
              });
            });

        停止执行所有的队列动画,并且快速完成当前动画的动作(即,假如有5个队列动画,

现在正在执行第3个,点击之后停止执行所有队列的动画,但是会把当前(即第3个队列)的动画动作快速的完成)

6. 回调函数Callback方法   作为动画animate的第三个参数 Callback 函数是在当前动画 100% 完成之后执行的。

  6.1 回调函数在动画animate中不是必写的,但在很多时候还是很有必要的。

  例:(没有回调函数)

    <button>隐藏</button>
    <p>显示的内容,点击后隐藏</p>

    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide(1000);
        alert("现在段落被隐藏了");
      });
    });

 结果会导致的是在点击隐藏的时候,动画还没有执行就弹出了alert 

  例:(有回调函数)

    <button>隐藏</button>
    <p>显示的内容,点击后隐藏</p>  

    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide("slow",function(){
          alert("段落现在被隐藏了");
        });
      });
    });

 结果是在完全执行玩动画之后才弹出alert

7.链接chaining  (Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上))

 例:<p id="p1">显示的内容</p>

   <button>点我</button>

   $(document).ready(function(){
     $("button").click(function(){
      $("#p1").css("color","red").slideUp(2000).slideDown(2000);
     });
   });

  提示:当进行链接时,代码行会变得很长。不过,jQuery 语法不是很严格;您可以按照希望的格式来写,包含换行和缩进。

因为jQuery 会抛掉多余的空格,并当成一行长代码来执行。  

  例:$(document).ready(function(){
      $("button").click(function(){
        $("#p1").css("color","red")
        .slideUp(2000)
        .slideDown(2000);
      });
    });

jquery快速入门(二)的更多相关文章

  1. jquery 快速入门二

    ---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...

  2. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  3. JQuery的入门(二)

    Jquery的遍历 jQuery对象本身就是数组对象,通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体,因此在常常需要对jquery对象进行遍历.这里有三种遍历Jquery的方法. ...

  4. python3.5+django2.0快速入门(二)

    昨天写了python3.5+django2.0快速入门(一)今天将讲解配置数据库,创建模型,还有admin的后台管理. 配置数据库 我们打开mysite/mysite/settings.py这个文件. ...

  5. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  6. JQuery快速入门-选择器

    JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...

  7. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  8. jquery快速入门(一)

    一.jquery加载文档 jquery加载文档(也叫入口函数) $(document).ready(function(){ // 这里写 jQuery 代码... }); 简写方式: $(functi ...

  9. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

随机推荐

  1. React Native 之极光推送jpush-react-native 手把手配置

    这是 react native 配置极光推送使用的组件,比较常用https://github.com/jpush/jpush-react-native 先把组件地址贴出来,方便大家使用参考.如果这个大 ...

  2. 使用Akka的远程调用

    概述 正如其它RPC或者RMI框架那样,Akka也提供了远程调用的能力.服务端在监听的端口上接收客户端的调用.本文将在<Spring与Akka的集成>一文的基础上介绍Akka的remote ...

  3. SpringBoot之旅第六篇-启动原理及自定义starter

    一.引言 SpringBoot的一大优势就是Starter,由于SpringBoot有很多开箱即用的Starter依赖,使得我们开发变得简单,我们不需要过多的关注框架的配置. 在日常开发中,我们也会自 ...

  4. jquery版 发同步请求 自定义头部信息 公共请求体

    //jquery版 发同步请求 function getData(url,param,fn){ var Authorization=localStorage.getItem("Authori ...

  5. shell简明教程

    shell的格式 shell可以在直接在命令行下输入,也可以保存成shell脚本文件运行.当命令简单并且不需要重复使用,在命令行输入直接执行即可,否则就写成脚本.shell脚本默认文件扩展名为.sh. ...

  6. 我的秋招经验分享(已拿BAT头条网易滴滴)

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  7. 软件测试自动化的最新趋势对开源测试管理软件ITEST的启示

    https://www.infoq.cn/article/c-LHJS2ksuDxp1WkrGl4 理面提到几点,DevOps 的关键原则是开发团队.测试团队和运营团队协作,无缝发布软件.这意味着集中 ...

  8. 数据结构与算法(九):AVL树详细讲解

    数据结构与算法(一):基础简介 数据结构与算法(二):基于数组的实现ArrayList源码彻底分析 数据结构与算法(三):基于链表的实现LinkedList源码彻底分析 数据结构与算法(四):基于哈希 ...

  9. aps .net MVC单用户登录

    当不允许多用户同时登录一个帐号时,就需要一种机制,当再登录一个相同的帐号时,前面登录的人被挤下线. 原文地址:http://www.cnblogs.com/f23wangj/p/4984302.htm ...

  10. 前端css

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...