第一大部分 提纲

事件与动画
一、事件
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. WinForm 小程序 NotePad

    运行效果: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  2. arm：c语言和汇编混合编程

    仅作演示. 1.C和汇编可相互调用,汇编子函数格式参考 汇编:普通的函数调用的汇编代码解析 http://www.cnblogs.com/mylinux/p/4139972.html 本文演示了 : ...

  3. Mac删除废纸篓中的单一文件和文件夹

    http://www.macappbox.com/tips/159/ 通过Automator创建教程: 1.打开Automator并选择新建 2.选择服务类型 3.搜索Run Shell Script ...

  4. 机器时代的中国字幕(Automata.2014.720p.WEB-DL.DD5.1.H264-RARBG.srt)

    看字幕.再也看不下去.自己翻译的位 评价的探讨 1 00:01:58,452 --> 00:02:02,088 人工增雨 期限为32分钟16第二 2 00:02:02,089 --> 00 ...

  5. 【linux驱动笔记】linux模块机制浅析

      1.   模块module 操作系统分微内核和宏内核,微内核优点,可以使操作系统仅作很少的事,其它事情如网络处理等都作为应用程序来实现,微内核精简的同时,必然带来性能的下降.而linux的宏内核设 ...

  6. Java中Timer和TimerTask的使用

    转自:http://www.cdtarena.com/javapx/201306/8893.html java.util.Timer定时器,实际上是个线程,定时调度所拥有的TimerTasks. 一个 ...

  7. 基于visual Studio2013解决C语言竞赛题之1033数字交换

          题目 解决代码及点评 /* 功能:将一个一维数组中的偶数依次交换.例如有8个元素, 若其中第1.4.5三元素是偶数时应按下图交换. 例子: a[]={2,3,1,6 ...

  8. hdu1200(来来回回串起来)

    Problem Description Mo and Larry have devised a way of encrypting messages. They first decide secret ...

  9. 浅谈Jquery的使用下篇

    上一篇我们已经探讨了Jquery的有关的内容,简单的选择器以及一些Jquery的属性事件和方法等内容,让我们简单的学到了Jquery的比较基础的内容,下面我们就来探讨Jquery的一些其它的内容,比如 ...

  10. 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示(转)

      我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用ecl ...