效果图：

    →→→→→→

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

<style>
#div2
{
transform:rotate(30deg); /*transform 变换：旋转30度*/
}
</style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div style="display:none" class="panel">

        只有点击按钮后我才会显示出来！！

            </div>

        <input id="Button1" type="button" value="点我" onclick="slideToggle() "/>

        <br/>

        <br/>

        <br/>

         <input id="Button2" type="button" value="点我图片会动哦！！" />

        <div style="background:#98bf21;height:100px;width:100px;position:absolute;" id="animate"> </div>

       <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <br/>

        <ol>

        <li>这是1</li>

         <li>这是2</li>

         <li>这是3</li>

          </ol>

  <input id="Button3" type="button" value="点我就会追加列表" />

        <div id="css" style="background-color:red;width:200px;height:100px;">

            <p id="p1">改变css属性</p>

            </div>

<div id="div2" style="width:200px;height:100px;background-color:#00ff21">
</div>

    </div>

    </form>

</body>

</html>

<script src="jquery-1.11.2.min.js"></script>

<script>

    //简单的slide panel效果

    function slideToggle()

    {

        $(".panel").slideToggle("slow");

    }

    //简单的animate效果

    $(document).ready(function () {

        $("#Button2").click(function () {

            var div = $("#animate");  //animate 驱动效果

        div.animate({ height: '300px', opacity: '0.4' }, "slow");

        div.animate({ width: '300px', opacity: '0.8' }, "slow");

        div.animate({ height: '100px', opacity: '0.4' }, "slow");

        div.animate({ width: '100px', opacity: '0.8' }, "slow");

        })

    })

    //追加列表项

    $(document).ready(function () {

        $("#Button3").click(function () {

            $("ol").append("<li>Appended item</li>");  //Append追加

            //$("ol").before("<li>Appended item</li>");  //before 在……之前追加文本

            //$("ol").after("<li>Appended item</li>");//before 在……之后追加文本

        })

    })

    //改变css属性

    $(document).ready(function () {

        $("#css").click(function () {

            alert($(this).css("background-color"));//获取颜色

                $(this).css("background-color", "yellow"); //改变单个属性

            //$("p").css({ "background-color": "blue", "font-size": "200%" }); //改变多个属性

        })

    })

    $("div#intro .head") //选择器选取哪些元素？

    //正确答案：id="intro" 的首个 div 元素中的 class="head" 的所有元素

    </script>

Jquery动画第二部分的更多相关文章

  1. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  2. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  3. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  4. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  5. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  7. jQuery 动画的执行

    jQuery 动画的执行 <%@ page language="java" import="java.util.*" pageEncoding=" ...

  8. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  9. JQuery动画详解（四）

    一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...

随机推荐

  1. java 中的this关键字的几种用法

    转自:http://blog.csdn.net/anmei2010/article/details/4091227 1.     当成员变量和局部变量重名时,在方法中使用this时,表示的是该方法所在 ...

  2. 给虚拟机中的CentOS7配置固定ip

    在虚拟机中安装完了CentOS7之后,使用了DHCP来获取ip,vmware的网络连接使用了NAT模式.但是在把Linux设置为固定ip地址后,虚拟机里的linux可以ping通全网段的ip地址,但是 ...

  3. 《WPF程序设计指南》读书笔记——第2章 基本画刷

    1.Color结构 using System; using System.Windows; using System.Windows.Input; using System.Windows.Media ...

  4. windows 与fedora时间差

    windows 默认BIOS时间当前时间UTC+时区, 按北京时间时区,就是要加8个小时. Linux默认BIOS时间是UTC时间,所以同一机子上装WINDOWS与LINUX时间上会差8个小时.这问题 ...

  5. Oracle的rownum原理

    Oracle中,按特定条件查询前N条记录,用个rownum就搞定了: SQL> select * from dept where rownum<3; 而对rownum用"> ...

  6. Oracle的spool命令

    在控制台上使用spool 路径+文件名 命令可以将整个过程写入指定的文件中, 结束使用spool off 命令, 当执行spool off后文件中的内容才能看见; ed命令修改当前缓冲区的上一条命令;

  7. Sql之表的连接总结

    1.交叉连接(就是将两张表的数据 交叉组合在一起) 有两张表 客户表:[Sales.Customers] 和订单表:[Sales.Orders]. 业务需求:实现 Customer中custid(客户 ...

  8. 关于sqlmap无法打开的问题解决办法

    sqlmap无法打开这个问题困扰了我几天,今天才从一个论坛的视频教程里看到这个办法,有可能对其他有些情况依旧没用,但是希望和我一样状况的人看到这篇文章,能收到一些启发 我之前百度了很久,google了 ...

  9. sshj ,ssh , springmvc pom.xml

    记录下项目中的 pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ...

  10. XP纯净版光盘ISO镜像文件

    原版xp的下载地址,直接发链接得了-.-打开迅雷,按新建任务,把下面下载地址复制进来,下载就可以了 thunder://QUFodHRwOi8vc29mdC51c2Fpa2EuY24vstnX98+1 ...