jQuery实现动画效果的简单实例

一、需求原因
目前jQuery已经是一个比较成熟的框架了，而且基于他的插件也有上百种，本例我手动用jQuery实现一个动画效果的例子。

二、具体实现


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQuery实现动画效果</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<style type="text/css">
     #test {
         position:relative;
         width:100px;
         height:100px;
         border:1px solid #0050d0;
         background:#96e555;
          cursor:pointer;
     }
</style>
<script type="text/javascript">
     $(function(){
         $("#test").css("optcity","0.5");//设置不透明
         $("#test").click(function(){
              $(this).animate({left:"400px",height:"200px",opacity:"1"},300)
                      .animate({top:"200px",width:"200px"},300)
                      .fadeOut("slow");
         });
     });
</script>
</head>
<body>
     <div id="test"></div>
</body>
</html>

三、运行结果

赞 (0)

相关推荐

  • 基于jquery和svg实现超炫酷的动画特效

    基于jquery和svg实现超炫酷的动画特效

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 实现的代码. html代码: 复制代码 代码如下: <div id="intro">         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"          

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • 用队列模拟jquery的动画算法实例

    本文实例讲述了用队列模拟jquery的动画算法.分享给大家供大家参考.具体分析如下: Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气.发现他写的一段源码,运行一下,还蛮好玩的,于是拿来分析一下,一来吸收下里边的营养,二来加深一下源码学习的功力.话说这源码还真是提高js内功的一大秘决,不信,就和我一起来品味一下吧. 复制代码 代码如下: //立即执行函数,没有什么好说的.看下面演示 /** (function($){     //此处的$会由后面紧跟的立

  • JQuery中的事件及动画用法实例

    本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

  • JQuery选择器绑定事件及修改内容的方法

    本文实例讲述了JQuery选择器绑定事件及修改内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World jQuery!</title> <script type="text/javascript" src="jquery-1.3.2.min.js&

  • jquery事件preventDefault()方法用法实例

    本文实例讲述了jquery事件preventDefault()方法用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery事件:preventDefault()方法的使用</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <

  • 浅谈jQuery事件绑定原理

    jq里面有一个data的方法,给dom元素绑定相关的数据的.当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

    二.动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的

  • jQuery 处理页面的事件详解

    在之前dom操作中提到了javascript对事件处理的介绍.由于不同浏览器处理事件各不相相同,这给开发者带来了不必要的麻烦,jQuery的方便的解决了这个方面的麻烦. 1.绑定事件监听 (http://www.jb51.net/article/60096.htm)对事件的监听做了详细的介绍,看到了iE和DOM标准浏览器对待事件监听的区别,并对多个监听事件执行顺序和方式也不相同. 在jQuery中,通过bind()对事件绑定,相当于IE浏览器的attachEvent()和标准DOM的addEve

  • jQuery中ready事件用法实例

    本文实例讲述了jQuery中ready事件用法.分享给大家供大家参考.具体分析如下: 此事件会在文档加载就绪以后触发,也就是当DOM对象已经加载,并且网页内容全部呈现时候触发. ready()方法可以为ready事件绑定事件处理方法,并且此方法的选择器是唯一的,那就是document对象. 语法形式有三种,后两种是第一种的简写. 语法结构: 语法一: 复制代码 代码如下: $(document).ready(function) 语法二: 复制代码 代码如下: $().ready(function

随机推荐