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. bzoj 1391 [Ceoi2008]order（最小割）

    [题意] 有n个有偿工作选做,m个机器,完成一个工作需要若干个工序,完成每个工序需要一个机器,对于一个机器,在不同的工序有不同的租费,但买下来的费用只有一个.问最大获益. [思路] 对于工作和机器建点 ...

  2. 多校6 1001 HDU5793 A Boring Question (推公式 等比数列求和)

    题解:http://bestcoder.hdu.edu.cn/blog/ 多校6 HDU5793 A Boring Question // #pragma comment(linker, " ...

  3. leetcode@ [352] Data Stream as Disjoint Intervals (Binary Search & TreeSet)

    https://leetcode.com/problems/data-stream-as-disjoint-intervals/ Given a data stream input of non-ne ...

  4. Java设计模式系列之命令模式

    命令模式(Command)的定义 将一个请求封装为一个对象,从而可用不同的请求对客户进行参数化:对请求排队或记录日志,以及支持可撤销的操作,将”发出请求的对象”和”接收与执行这些请求的对象”分隔开来. ...

  5. CodeForces 682C Alyona and the Tree （树+dfs）

    Alyona and the Tree 题目链接: http://acm.hust.edu.cn/vjudge/contest/121333#problem/C Description Alyona ...

  6. 扩展KMP题目

    hdu4333 /* 题意:字符串s[0..n-1],每次把最后一个字符放到前面,求形成的字符串比最初串分别小,相同,大于的个数 因为是为了练习扩展KMP所以肯定是扩展KMP, 为了循环方便,在后面复 ...

  7. BZOJ 1036 [ZJOI2008]树的统计Count (树链剖分 - 点权剖分 - 单点权修改)

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1036 树链剖分模版题,打的时候注意点就行.做这题的时候,真的傻了,单词拼错检查了一个多小时 ...

  8. java中的定时器

    所有类型的 Java 应用程序一般都需要计划重复执行的任务.企业应用程序需要计划每日的日志或者晚间批处理过程.一个 J2SE或者 J2ME 日历应用程序需要根据用户的约定计划闹铃时间.不过,标准的调度 ...

  9. C# 解压zip压缩文件

    此方法需要在程序内引用ICSharpCode.SharpZipLib.dll 类库 /// <summary> /// 功能:解压zip格式的文件. /// </summary> ...

  10. Cocos2d-x——Cocos2d-x 屏幕适配总结

    本张图以iPhone5为例子,并且采用ResolutionNoBorder的绘制方式(这种方式就是会在原图的基础上出现裁切,一部分图片会显示到屏幕外边去,如AEHD和FBCG就是显示到屏幕外边的内容) ...