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. Canvas入门（3）:图像处理和绘制文字

    来源:http://www.ido321.com/997.html 一.图像处理(非特别说明,所有结果均来自最新版Google) 在HTML 5中,不仅可以使用Canvas API绘制图形,也可以用于 ...

  2. jq实现图片轮播:圆形焦点+左右控制+自动轮播

    来源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...

  3. Activity生命周期与状态保存

    弹出系统对话框,程序仍部分可见 onPause 对话框消失时 onResume   调用一个新的Activity,老的Activity不可见时 onPause->onStop 从新的Activi ...

  4. C#简单应用spring的例子

    接口定义 namespace SpringDemo { interface IOper { void Say(); } } 此接口的两个实现 实现1 using System; namespace S ...

  5. Android MuPDF 部署

    MuPDF是一款轻量级的开源软件,可以用来阅读PDF文件.下载完源代码以后,想要运行成功,除了Android SDK之外,还需要Android NDK环境,因此有点麻烦. 但是一旦安装完必须的环境以后 ...

  6. VHDL的testbench的编写（转）

    大多数硬件设计人员对verilog的testbench比较熟悉,那是因为verilog被设计出来的目的就是为了用于测试使用,也正是因为这样verilog的语法规则才被设计得更像C语言,而verilog ...

  7. 如何在Visual Studio中选择C++和C#的编译器版本

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在Visual Studio中选择C++和C#的编译器版本.

  8. java对cookie的操作_01

    /** * 读取所有cookie * 注意二.从客户端读取Cookie时,包括maxAge在内的其他属性都是不可读的,也不会被提交.浏览器提交Cookie时只会提交name与value属性.maxAg ...

  9. "file:///" file 协议

    [问题] 在WLW中拖入本地图片文件,然后调试过程中,选中对应图片,看到获得的对应的html源码中,图片地址是这样的: href="file:///C:/Users/CLi/AppData/ ...

  10. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...