推荐网址：http://www.php100.com/manual/jquery/，用法教学，包括实例。

分类：显示隐藏、淡入淡出、滑动、自定义。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!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>

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

    <script>

        function show() {

            var obj = $("#div1");

            obj.toggle();

        }

        function slide() {

            var obj = $("#div1");

            obj.slideToggle();

        }

        function fade() {

            var obj = $("#div1");

            obj.fadeToggle();

        }

        function showEvg() {

            var obj = $("#div1");

            //obj.toggle(4000);  //4s

            //obj.toggle("slow"); //600ms

            //obj.toggle("normal");

            //obj.toggle("fast");  //200ms

            //obj.toggle(4000, function () {

            //    alert('ok');  //执行结束弹出ok

            //});

            //obj.animate({ "width": "100px", "height": "100px", "opacity": "toggle" }, "fast", function () { });

            //obj.animate({ "width": "100px", "height": "100px", "opacity": "show" }, 1000, function () { });

            //obj.stop();

            //obj.finish();//停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

            //obj.slideUp(300).delay(800).fadeIn(400);//在.slideUp() 和 .fadeIn()之间延时800毫秒。

        }

    </script>

</head>

<body>

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

        <div style="width: 500px; height: 200px; background-color: green;" id="div1">

        </div>

        <input type="button" value="点击我show" onclick="show()" />

        <input type="button" value="点击我slide" onclick="slide()" />

        <input type="button" value="点击我fade" onclick="fade()" />

        <input type="button" value="点击我showEvg" onclick="showEvg()" />

    </form>

</body>

</html>

jQuery 动画效果的更多相关文章

  1. JQuery动画效果

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

  2. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

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

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

  4. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  5. jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...

  6. jquery 动画效果插件

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  7. 40个超酷的jQuery动画效果教程

    自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...

  8. jquery动画效果中，避免持续反应用户的连续点击

    一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...

  9. jQuery自学笔记（三）：jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  10. 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...

随机推荐

  1. music-api-next：一款支持网易、xiami和QQ音乐的JS爬虫库

    音乐,无界 让音乐无界 如果你苦于挑选一个全方位.多平台.简便易用的音乐爬虫库,music-api-next是不二选择. 特性: 支持网易.虾米和QQ三大主流音乐平台 支持音乐关键词搜索 支持音乐链接 ...

  2. Python 函数的作用域

    python中的作用域有4种: 名称 介绍 L local,局部作用域,函数中定义的变量: E enclosing,嵌套的父级函数的局部作用域,即包含此函数的上级函数的局部作用域,但不是全局的: B ...

  3. 深入研究HTML5实现图片压缩上传

    上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢 ...

  4. JS中数组去重的九方法

            数组去重方法        方法一:运用set结构特点:存储的数据没有重复的,结果为对象,再用Array.from()转换成数组   var arr = [1,1,2,1,3,4,5] ...

  5. Lightning 组件基础知识

    Lightning框架简介 Lightning框架是Salesforce提供的一套基于用户界面的开发框架,对于开发单页面应用(Single Page Application)有很大的帮助.它和Visu ...

  6. 网络基础 http 会话(session)详解

    http 会话(session)详解 by:授客 QQ:1033553122 会话(session)是一种持久网络协议,在用户(或用户代理)端和服务器端之间创建关联,从而起到交换数据包的作用机制 一. ...

  7. Django基础篇--模板和路由分发

    Django模板 首先什么是一个模板? 简单来说就是一个网页,可以被view响应给用户 目的是为了解决复杂的显示问题 2. 模板的设置问题 setting.py中的TEMPLATES配置 1)BACK ...

  8. mybatis学习系列四--mybatis generator逆向工程

    采用命令行方式执行逆向工程 1.配置文件generatorConfig.xml 保存在目录:D:\E\workspace\eclipse\mybatis_generator <?xmlversi ...

  9. 【HANA系列】SAP HANA XS的JavaScript API详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS的Java ...

  10. Python基础知识：测试代码

    1.Python标准库中的模块unittest提供了代码测试工具. 单元测试用于核实函数的某个方面没有问题: 测试用例是一组单元测试,这些单元测试一起核实函数在各种情形下的行为都符合要求. 通俗的理解 ...