jQuery的动画效果

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="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()实现交替显示向上向下滑动动画效果

posted on 2016-03-09 15:35 米虫爱喝咖啡阅读(182) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 官方的 MCP C# SDK：csharp-sdk
· 一款 .NET 开源、功能强大的远程连接管理工具，支持 RDP、VNC、SSH 等多种主流协议！
· 提示词工程师自白：我如何用一个技巧解放自己的生产力
· “你见过凌晨四点的洛杉矶吗？”--《我们为什么要睡觉》
· 如何不购买域名在云服务器上搭建HTTPS服务

米虫爱喝咖啡

jQuery的动画效果

导航

公告