//隐藏显示
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>index.html</title>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <p id="p1">如果点击“隐藏”按钮，我就会消失</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
    <button id="toggle" type="button">切换</button>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide(1000);
            });
            $("#show").click(function(){
                $("p").show(1000);
            });
            $("#toggle").click(function(){
                $("p").toggle(1000);
            });
        });
    </script>
</body>
</html>

//淡入淡出
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index.html</title>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <button id="fadeIn" type="button">淡入</button>
    <button id="fadeOut" type="button">谈出</button>
    <button id="toggle" type="button">切换</button>
    <button id="fadeTo" type="button">fadeTo</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

    <script>
        $(document).ready(function(){
            $("#fadeIn").click(function(){
                $("#div1").fadeIn(3000);
            });
            $("#fadeOut").click(function(){
                $("#div1").fadeOut(1000);
            });
            $("#toggle").click(function(){
                $("#div1").fadeToggle();
            });
            $("#fadeTo").click(function(){
                $("#div1").fadeTo("slow",0.4); //opacity:1为完全不透明
            });
        });
    </script>
</body>
</html>

//滑动效果，停止，链式
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>index.html</title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <style rel="stylesheet">
        .menu, .panel{
            width: 500px;
            padding: 5px;
            margin: 0 auto;
            text-align: center;
            background: #e5eecc;
            border: 1px solid #c3c3c3;
        }
        .panel{
            height: 120px;
            display: none;
        }
    </style>
</head>
<body>
    <p class="menu">
        <button class="slideDown">slideDown</button>
        <button class="slideUp">slideUp</button>
        <button class="slideToggle">slideToggle</button>
        <button class="stop">stop</button>
        <button class="chain">chain</button>
    </p>
    <div class="panel">
        <p>hello world!</p>
        <p>how are you?</p>
    </div>

    <script>
        $(document).ready(function(){
            $(".slideDown").click(function(){
                $(".panel").slideDown("slow");
            });
            $(".slideUp").click(function(){
                $(".panel").slideUp(1000,function(){
                    alert("The paragraph is now hidden");
                });
            });
            $(".slideToggle").click(function(){
                $(".panel").slideToggle(5000);
            });
            $(".stop").click(function(){
                $(".panel").stop();
            });
            $(".chain").click(function(){
                $(".panel").css("color","red")
                    .slideDown(2000)
                    .slideUp(2000);
            });
        });
    </script>
</body>
</html>

//动画
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>index.html</title>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

    <script>
        $(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");
          });
        });
    </script>
</body>
</html>

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. asp.net 微信企业号办公系统-流程设计--流程步骤设置-按钮设置

    按钮设置是配置当前步骤的处理者可以执行哪些操作,每个按钮都有对应的执行脚本(javascript脚本). 从左边的按钮列表中选择当前步骤需要的按钮. 注意:如果是流程最后一步则要配置完成按钮而不是发送 ...

  2. Xcode4 使用技巧

    Xcode4 使用技巧 使用 xcode4 也有一段时间了,今天整理了一下 xcode4 的一些使用技巧,在这里分享给大家. 设置作者 这里所指的作者就是每个源文件头部注释中的 "Creat ...

  3. 微课程--Android--Android开发学习体系

    四大组件 csdn上面一个关于安卓学习资料的网址 http://blog.csdn.net/vanpersie_9987/article/details/53043590 因为太懒所以花钱买罪受,花了 ...

  4. 结合自己的程序对thinkphp模板常量的理解

    先上个图,有时候路径很多,没理解会搞混,看手册的说明 页面login.html模板的访问路径为http://www.tp.com/index.php/admin/Manager/login,测试他的常 ...

  5. cookiecutter-flask生成的框架里边自带了一个CRUDMixin类

    单元测试的必要性 之前曾经写过一篇讲单元测试的,正好最近也在实践和摸索.我似乎有种洁癖,就是我会严格遵守流程性的东西,比如测试,注释和文档等.目前就职的公司在我接手项目的时候是没有一行单元测试的,我挺 ...

  6. [转]Entity Framework走马观花之把握全局

    本文转自:http://blog.csdn.net/bitfan/article/details/12887007 Entity Framework走马观花 之 把握全局 ============== ...

  7. Acronis True Image Home 2011 PXE服务器配置_qxxz_新浪博客

    想实现网络启动,并且Acronis启动菜单中带有Acronis True Image Home,需要安装以下软件: 1.安装Acronis True Image Home 2011及plush pac ...

  8. Angular:手动脏检查/$apply/$digest和监控对象/$watch

    声明:借鉴好多chm资料.视频.PDF总结如下: 一.$apply的引入 View <div ng-app=""> <div ng-controller=&quo ...

  9. 【翻译】Kinect Studio是？ 三月 SDK Update的新机能

      Kinect应用软件开发支援工具「Kinect Studio」的功能和用法的说明.由于可以记录/再生数据,让开发和调试变得更加简单.   Kinect SDK v2预览版的RTM版的预定在发布之前 ...

  10. PHP自动加载__autoload的工作机制

    PHP自动加载__autoload的工作机制 PHP的懒加载lazy loading 在 2011年11月12日 那天写的     已经有 4559 次阅读了 感谢 参考或原文   服务器君一共花费了 ...