第一大部分 提纲

事件与动画
一、事件
1.在JavaScript语法中的事件，把onxxxxx中的on去掉，就是JQuery中的事件。
onclick - click
ondblclick - dblclick
 
onmouseover - mouseover
onmouseout - mouseout
 
onfocus - focus
onblur - blur
 
onchange - change
 
onkeydown - keydown
onkeyup - keyup
onkeypress - keypress
 
2.特有事件：
hover(function(){},function(){})：相当于把mouseover和mouseout结合起来了
toggle(function(){},function(){},...function(){})：每点击一下执行下一个function,如执行到末尾，会再返回第一个执行
 
 
3.JQuery中的事件，需要事件的小括号中写function(){}
$("#Button1").click(function(){
//事件处理代码
});
 
案例：
1.光棒效果：mouseover,mouseout
2.展开面板：click
 
二、动画
hide(),show()
fadeIn(),fadeOut()
slideUp(),slideDown()
 
slideUp([毫秒数],[回调函数])
slideUp(3000,function(){xxx();})
 
animate({left:"500px"},3000,function(){/*回调函数*/})
stop(bool,bool);
第一个参数：是否清空之前的动画序列。
第二个参数：直接走到最后的状态。

第二大部分 例题

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 type="text/css">
        #ss{
            border:1px solid blue;
           
            width:300px;
            height:300px;
            position:absolute;
        }
        ul{
            list-style-type:none;
            width:400px;
            border:1px  ;
        }
        .titlebar{
            padding:5px;
           
            color:white;
            margin-top:1px;
        }
        .spanbar{
            padding:5px;
           
            display:none;
        }
        #aa{
            padding:5px;
            border:1px solid blue;
        }
    </style>
    <script src="新文件夹1/jquery-1.8.2.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            //$(".titlebar").click(function () {   //click  鼠标点击事件
                //var s = $(this).next().css("display");
                //if(s == "none")//如果display ==none
                //{
                //    $(this).next().css("display","block");//如果把点击标题 那么把下面展开
                //}
                //else {
                //    $(this).next().css("display","none");//如果把点击标题 那么把下面隐藏
                      //}
              //});
            //$(".titlebar").hover(function(){        //hover鼠标移动到上面的事件   
            //    //$(this).next().css("display", "block");  //移动上去显示隐藏部分 
            //},function(){
            //    $(this).next().css("display", "none");//鼠标离开  隐藏
            //})
            //$(".titlebar").hover(function () { //hover 鼠标移动事件
            //    $(this).toggleClass("mover");  //toggleClass 如果没有 就添加上  如果有 就移除
            //}, function () {
            //    $(this).toggleClass("mover");
            //})
            //$("#aa").toggle(function () {  //toggle 里面可以放无数个 每次点击执行下一个 执行到最后一个就在执行第一个
            //    $(this).css("background-color","#ffff00");//
            //}, function () {
            //    $(this).css("background-color","#ff00ff");
            //}, function () {
            //    $(this).css("background-color","#00ffff");
            //}, function () {
            //    $(this).css("background-color","#ffffcc");
            //});
            //动画效果
            $(".titlebar").click(function () {
                var s = $(this).next().css("display");
                if (s == "none")
                {
                    //$(this).next().show();//点击显示
                    //$(this).next().fadeIn();//渐变显示 fadein(3000)括号里面放秒数 3秒    
                    $(this).next().slideDown();//slideDown()拉下来括号里面放秒数
                }
                else
                {
                    //$(this).next().hide();点击隐藏
                    //$(this).next().fadeOut();//fadeOut渐变隐藏
                    $(this).next().slideUp();//slideUp()拉上去 括号里面也是放时间
                }
            })
            
                $("#ss").click(function () {
                    //hideDiv();//点击回调函数  自动来回 拉上来拉下去
                    // $("#ss").animate({width:"500px",height:"500px"},3000)  //自定义动画用animate({},秒数) 自定义的在{}里面写
                    //$("#ss").animate({ width: "500px" }, 3000).animate({height:"500px"},3000)//先宽度拉伸500px 再高度增长500px
                    $("#ss").animate({ left: "500px" }, 3000).animate({ top: "200px" }, 3000).animate({ width: "500px" }, 3000).animate({ height: "500px" }, 3000);//跑到中间位置
                })
           
        });
        //定义显示毁回调函数
        function showDiv() {
            $("#ss").slideDown(3000, function () { hideDiv(); });
        }
        function hideDiv() {
            $("#ss").slideUp(3000, function () { showDiv(); });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
            <ItemTemplate>
                <li>
                    <div class="titlebar">
                        <%#Eval("Name") %>-<%#Eval("Price") %>
                    </div>
                    <div class="spanbar">
                        
                        代号：<%#Eval("Code") %>
                            <br/>
                        名称：<%#Eval("Name") %>
                            <br/>
                        系列: <%#Eval("Brand") %>
                            <br/>
                        油耗：<%#Eval("Oil") %>
                            <br/>
                        排量：<%#Eval("Exhaust") %>
                           <br/>
                        功率：<%#Eval("Powers") %>
                           <br/>
                        上市时间：<%#Eval("Time") %>
                           <br/>
                        价格：<%#Eval("PRice") %>
                           <br/>
                        
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
        <div>
            <span id="aa">
                点击变化颜色
            </span>
        </div>
        <div id="ss">
 
        </div>
    
    </div>
    </form>
</body>
</html>

JQuery 事件与动画的更多相关文章

  1. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  2. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

  3. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  4. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  5. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

  6. JQuery事件与动画总结

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...

  7. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

  8. python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  9. jQuery事件和动画

    1.toggle事件 <!DOCTYPE html>   <html>   <head lang="en">   <meta charse ...

随机推荐

  1. sencha touch(7)——list组件

    1.list组件是一个很强大的组件.用于以一览表的形式或者列表的形式展示应用程序中的大量的数据.该组件使用XTemplate模版来显示数据,同时与数据仓库进行绑定.所以当数据仓库中的数据发生变化的时候 ...

  2. [转]VMware 出现下述错误： Application failure. hr=0x80040101:Failed to initialize virtual machine.

    VMware 出现下述错误:Application failure. hr=0x80040101:Failed to initialize virtual machine. 解决方法:1.重新注册这三 ...

  3. Android--pendingIntent & Intent

    PendingIntent pendingIntent字面意义:等待的,未决定的Intent.要得到一个pendingIntent对象,使用方法类的静态方法 getActivity(Context, ...

  4. ActivityGroup相关--getLocalActivityManager() 以及intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)用法

    ActivityGroup简介 1.ActivityGroup的核心就是继承了该类,能够通过getLocalActivityManager()得到一个LocalActivityManager 如,Lo ...

  5. perl 传递对象到模块

    perl 中的对象 就是引用 通过new方法传递数据结构给各个模块 [root@wx03 test]# cat x1.pm package x1; use Data::Dumper; sub new ...

  6. 程序集的内部结构(托管模块、元素局、IL代码的分布情况)

    程序集的内部结构 在看程序集的结构之前,我们先来看托管模块的结构. 托管模块由四部分组成:PE32头.CLR头.元数据(Metadata).IL代码.其中PE32头是用来决定托管模块运行的系统环境(3 ...

  7. encode_utf8 把字符编码成字节 decode_utf8解码UTF-8到字符

    encode_utf8 $octets = encode_utf8($string); Equivalent to "$octets = encode("utf8", $ ...

  8. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: SELECT command denied to user 'xxxx'@''

    这两天项目一直在报这个错误消息: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: SELECT command denied to ...

  9. CLR和.Net对象

    CLR和.Net对象生存周期 前言 1. 基础概念明晰* 1.1 公告语言运行时* 1.2 托管模块* 1.3 对象和类型* 1.4 垃圾回收器 2. 垃圾回收模型* 2.1 为什么需要垃圾回收* 2 ...

  10. Delphi XE5 for Android（十一篇）

    http://www.cnblogs.com/ChinaEHR/category/521326.html http://blog.csdn.net/laorenshen