jQuery常见的动态效果：

隐藏/显示效果：

1.（1）：隐藏，显示：通过 jQuery，使用 hide() 和 show() 方法可以用来隐藏和显示 HTML 元素。

(2)：隐藏/显示的速度：

语法：

$（selector）.hide(speed, callback);

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

speed 参数规定隐藏/显示的速度;callback 参数是隐藏或显示完成后所执行的函数名称。如：$("p").hide(1000) 隐藏内容的速           度。

2.使用 toggle() 方法可以用来切换 hide() 和 show() 方法。如：$("p").toggle()。

淡入淡出效果：

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

语法：$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

点击之后：

      

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

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

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

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

4.jQuery fadeTo() 方法允许渐变为给定的不透明度

语法：$("#div1").fadeTo("slow",0.15);
               $("#div2").fadeTo("slow",0.4);
               $("#div3").fadeTo("slow",0.7);

滑动效果：

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

语法：$("#panel").slideDown();

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

语法：$("#panel").slideUp();

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

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

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

语法：$(".panel").slideToggle("slow");

动画：

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

语法：$("div").animate({left:'250px'});

生成动画的过程中可同时使用多个属性：

如：

$("div").animate({
              left:'250px',
              opacity:'0.5',
              height:'150px',
              width:'150px',

height:'toggle'

              });

             var div=$("div");

             div.animate({height:'300px',opacity:'0.4'},"slow");
             div.animate({width:'300px',opacity:'0.8'},"slow");

           

点击开始：

            

停止动画：

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

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

语法：$("#panel").stop();

实现代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
                 $("#hide").click(function(){
                        $("p").hide();   //隐藏
                    });
          $("#show").click(function(){
                        $("p").show();      //显示
                    });
            });
</script>
</head>
<body>
       <p id="p1">点击隐藏就隐藏咯，点击显示就显示咯</p>
       <button id="hide" type="button">隐藏</button>
       <button id="show" type="button">显示</button>
</body>
</html>

jQuery动态效果实例的更多相关文章

  1. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  4. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  6. jQuery 验证实例(shopnc二次开发)

    shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...

  7. 一个简单的jQuery插件开发实例

    两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...

  8. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

随机推荐

  1. [Locked] Range Sum Query 2D - Mutable

    Range Sum Query 2D - Mutable Given a 2D matrix matrix, find the sum of the elements inside the recta ...

  2. 路由器中pppoe，动态IP，静态IP的区别

    路由器中pppoe,动态IP,静态IP的区别 要把路由器设置得能上网,无非就是设置WAN外网接口连接而已.WAN接口能上网,则连接的电脑就能上网,反之则上不了网.只不过WAN接口往往有pppoe,动态 ...

  3. POJ2773 - Happy 2006(欧拉函数)

    题目大意 给定两个数m,k,要求你求出第k个和m互质的数 题解 我们需要知道一个等式,gcd(a,b)=gcd(a+t*b,b) 证明如下:gcd(a+t*b,b)=gcd(b,(a+t*b)%b)= ...

  4. redis的hash, list, set类型相关命令

    hash相关命令: 1. hset HSET key field value 将哈希表key中的域field的值设为value.如果key不存在,一个新的哈希表被创建并进行hset操作.如果域fiel ...

  5. PC-飞起来！我的Windows XP——五步快速优化Windows XP

    虽然Microsoft的 Vista已经发售了快一年,但国内大部分系统用户仍使用着目前堪称完美的Windows XP.与以往的Windows操作系统一样,新安装的Windows XP可能还不在最佳状态 ...

  6. hdoj 2802 F(N)【递推 规律】

    F(N) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. HBase 学习笔记---守护进程及内存调优

    1.HMaster           HMaster的任务前面已经说过了,两个大方向:一.管理Hbase Table的 DDL操作 二.region的分配工作,任务不是很艰巨,但是如果采用默认自动s ...

  8. JS 创建对象的几种方式

    面向对象就是把属性和操作属性的方法放在一起作为一个相互依存的整体--对象,即拥有类的概念,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性! ECMA-262把对象定义为:"无 ...

  9. MySQL安装配置，命令，异常纪要

    一.Mac上的安装配置      // brew安装      brew install mysql      // 设置为开机启动      brew services start mysql    ...

  10. iOS开发中使用CIDetector检测人脸

    在iOS5 系统中,苹果就已经有了检测人脸的api,能够检测人脸的位置,包括左右眼睛,以及嘴巴的位置,返回的信息是每个点位置.在 iOS7中,苹果又加入了检测是否微笑的功能.通过使用 CIDetect ...