jQuery 是一个 JavaScript 库。jQuery 库可以通过一行简单的标记被添加到网页中。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

下面开始展示jQuery 效果：隐藏、显示、切换，滑动，淡入淡出，以及动画。

由一个html文件,一个js文件,一个css文件实现。代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>练习</title>

<script src="js/jquery-1.10.2.js"></script>

<link rel="stylesheet" type="text/css" href="css/test.css">

<script src="js/test.js"></script>

</head>

<body  >

<h1 align="center">jQuery 效果练习</h1>

    姓名:

    <input id="name" type="text" /><br /><br />

    <img src="data:images/aa.png" />

    <button id="b1">显示/隐藏蛋糕</button>

    <button id="b2">淡入/淡出蛋糕</button>

    <button id="b3">自定义修改</button>

    <button id="b4">多个动作链接起来</button><br /><br /><br />

    <div id="div1">向上/向下滑动</div>

    <div id="div2">生活需要美好的想象！</div>

</body>

</html>
$(document).ready(function() {

    $("input").focus(function() {//

        $(this).css("background-color", "#cccccc");//当某个表单输入域获得焦点时调用

    });

    $("input").blur(function() {//

        $(this).css("background-color", "#ffffff");//当某个表单输入域失去焦点时调用

    });

    $("#b").click(function() {

        alert($("#name").val() + "小主，你好！"); // 取得Form中Input的内容

    });

    $("#b1").click(function() {// 交替显示和隐藏内容

        $("img").toggle("slow", function() {

            alert("操作已完成！");//先操作后提示

        });

    });

    $("#b2").click(function() {

        $("img").fadeToggle();// 交替显示的淡入淡出效果

    });

    $("#b3").click(function() {//自定义修改

        $("img").animate({

            height : '50px',

            width : '50px'

        });

        $("img").animate({

            height : '100px',

            width : '100px'

        });$("img").animate({

            height : '150px',

            width : '150px'

        });

    });

    $("#b4").click(function(){

        $("img").slideUp(2000).slideDown(2000);//多个动作即方法链接起来

      });

    $("#div1").click(function() {// 交替显示向上向下滑动动画效果

        $("#div2").slideToggle();

    });

});
#div1, #div2 {

    padding: 5px;

    text-align: center;

    background-color: #00FFFF;

    border: solid 1px #00FF00;

    height : 20px;

    width : 100px;

}

#div2{

    display: none;

    height: 70px;

    width : 600px;

    background-image: url(../images/d.png);

}

button {

    background-color: #00FFFF;

}

其实还有很多方法可以制作动画效果，例如：hide()和show()可以用来显示和隐藏内容。
toggle()方法，可以实现交替显示和隐藏内容

fadeIn()和fadeOut()实现显示的淡入淡出效果
fadeToggle() 交替进行fadeIn()和fadeOut()
fadeTo() 实现淡化到指定的透明度

slideDown()实现向下滑动动画效果
slideUp()实现向上滑动动画效果
slideToggle()实现交替显示向上向下滑动动画效果

jQuery的动画效果的更多相关文章

  1. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  2. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  3. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

  4. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  5. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  6. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  7. jQuery之动画效果

    1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...

  8. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  9. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

随机推荐

  1. MVC和WebForm的优缺点对比

    1 WebForm优点 1)支持事件模型开发,得益于丰富的服务端组件,WebForm开发可以迅速的搭建Web应用 2)使用方便,入门容易 3)控件丰富的WebForm 2 WebForm缺点  1)封 ...

  2. POJ 2280&&hdu 1661

    题意:给定平面上的N个点,属性分别标记为0和1,然后找一条直线,直线上的点全部溶解,一侧的1溶解,另一侧的0溶解.求出最多能溶解的点的个数. 思路:暴力枚举每个点,扫描线旋转.先做优化,如果一侧溶解0 ...

  3. 解决PHP5.3.x下ffmpeg安装配置问题

    本人的环境: OS : windows 7 64位 WAMP:2.1a PHP:5.3.3(之前是5.3.13) 项目需要用ffmpeg-php实现上传视频转码截图等功能,但是找了很多资料都没有把ff ...

  4. 题目1437：To Fill or Not to Fill：贪心算法解决加油站选择问题（未解决）

    //贪心算法解决加油站选择问题 //# include<iostream> # include<stdio.h> using namespace std; # include& ...

  5. Maven解决Missing artifact com.sun:tools:jar:1.5.0错误

    <dependency> <groupId>com.sun</groupId> <artifactId>tools</artifactId> ...

  6. Classes and Objects :类和对象(2)

    类内部可以有另一个类,也就是内部类,如果带static则为静态内部类静态内部类当然不能直接访问实例变量内部类修饰符可以有四种,而外部类只有两种 内部类的意义:这个内部类只适用于这个外部类因为外部类的某 ...

  7. iOS开发中使用Bmob RESTful API

    简介 尽管Bmob已经提供了一套SDK供开发者使用,但有时候开发者可能希望能直接与Bmob后台进行直接交互,以达到某些特别的需求(直接操作_User表.同步网络请求等).而RESTful API可以使 ...

  8. 产品经理如何赢得开发人员的尊重和支持？-摘自infoq

    对于产品经理来说,赢得开发人员的尊重和支持,从某种意义上讲,是产品迈向成功的坚实一步.最近,知乎社区上的开发人员和管理者在前.后两个帖子中对此展开了激烈的讨论,其中不乏真知灼见. 林志霖Cray认为产 ...

  9. 从使用到原理学习Java线程池

    线程池的技术背景 在面向对象编程中,创建和销毁对象是很费时间的,因为创建一个对象要获取内存资源或者其它更多资源.在Java中更是如此,虚拟机将试图跟踪每一个对象,以便能够在对象销毁后进行垃圾回收. 所 ...

  10. homework-02，第二次作业——寻找矩阵最大子序列和

    经过漫漫漫~~~~~~~~~~~~~~长的编译和调试,第二次作业终于告一段落了 先放出源码,思路后面慢慢道来 #include<stdio.h> #include<stdlib.h& ...