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. leetcode—Swap Nodes in Pairs

    1.题目描述 Given a linked list, swap every two adjacent nodes and return its head.   For example, Given ...

  2. NetAdvantage 笔记

    1.UltraControlBase Class Members 1.BeginUpdate Method Sets the IsUpdating flag to true which prevent ...

  3. HDU5744:Keep On Movin（字符串）

    题意: 给出t组测试数据,每组给出正整数n表示有n种字符,接下来给出n个数表示该种字符的数目,操作一下,使得可以构造的最小回文串字符数目最大且输出. 分析: 如果每个字符出现次数都是偶数, 那么答案显 ...

  4. 一个通用的Makefile （转）

    据http://bbs.chinaunix.net/thread-2300778-1-1.html的讨论,发现还是有很多人在问通用Makefile的问题,这里做一个总结.也作为以后的参考.       ...

  5. [iOS基础控件 - 6.10.7] UIWindow

    A.UIWindow概念 1.继承UIView,是一种特殊的UIView 2.通常一个APP只有一个UIWindow 3.iOS程序启动后,创建的第一个视图就是UIWindow 4.没有UIWindo ...

  6. 前端的一些常用DOM和事件归纳

    1.document.getElementById(id); document.getElementByTagName(tagName);       document.getElementsByNa ...

  7. Codeforces Round #271 (Div. 2) D. Flowers (递推)

    题目链接:http://codeforces.com/problemset/problem/474/D 用RW组成字符串,要求w的个数要k个连续出现,R任意,问字符串长度为[a, b]时,字符串的种类 ...

  8. jq倒计时

    var referTime = 5; setInterval("refer('#show')", 1000); function refer(obj){ if(referTime ...

  9. 学习php 韩顺平

    1.动态语言的发展史 最早使用cgi 学习 apache  全世界最流行的web服务器 php运行流程 → apache→php文件→数据库→php文件→浏览器 php底层语言是c语言 jsp底层语言 ...

  10. C++的辅助工具介绍

    1 文档类  (1) Doxygen  参考站点:http://www.doxygen.org  Doxygen是一种适合C风格语言(如C++.C.IDL.Java甚至包括C#和PHP)的.开放源码的 ...