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. Chapter5：语句

    表达式语句:一个表达式+一个分号 表达式语句的作用是执行表达式并丢弃掉求值结果. 空语句:单独一个分号 Best Practice:使用空语句时应该加上注释,从而令读这段代码的人知道该语句是有意省略的 ...

  2. bzoj 1798 [Ahoi2009]Seq 维护序列seq（线段树+传标）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1798 [题意] 给定一个序列,要求提供区间乘/加,以及区间求和的操作 [思路] 线段树 ...

  3. 叉积判断 POJ1696

    // 叉积判断 POJ1696 #include <iostream> #include <algorithm> #include <cstring> #inclu ...

  4. web服务器分析与设计（五）--一些总结

    随着年龄与经验的增加,对于软件方面的分析与设计也会有一些新的认识.下面做个近期的总结: 1,关于到底用不用作设计的问题: 在最近两个公司,原有人马是不会作设计(我自己的感觉),也察觉不到作设计的任何冲 ...

  5. JSON解析关联类型发生死循环 There is a cycle in the hierarchy!

    解决办法是忽略掉关联类型的数据,使用jsonConfig进行配置,代码如下: JsonConfig jsonConfig = new JsonConfig();  //建立配置文件 jsonConfi ...

  6. (转载)JDOM/XPATH编程指南

    JDOM/XPATH编程指南 本文分别介绍了 JDOM 和 XPATH,以及结合两者进行 XML 编程带来的好处. 前言 XML是一种优秀的数据打包和数据交换的形式,在当今XML大行于天下,如果没有听 ...

  7. C#的dll被其他程序调用时，获取此dll正确的物理路径

    当C# dll被其他程序调用时,用Application.StartupPath获取的dll路径并不一定是此dll的物理路径,有可能是调用程序的路径. 以下方法或者能够获取dll正确的物理路径(未经过 ...

  8. 校园网通过路由器开WiFi

    闲话少说,为了在一个宿舍内达到一个网口N人上网目的,特地写一篇关于校园网通过路由器开wifi的文章,希望能帮助同学把wifi开起来,请看正文(操作以下步骤前建议先重置路由,也就是初始化复位): 一.一 ...

  9. 第十五章 String讲解

    package ch15; import java.util.Scanner; public class Test { public static void main(String[] args) { ...

  10. python 循环

    200 ? "200px" : this.width)!important;} --> 介绍 python中有两种循环,分别是for...in循环.while循环:for.. ...