编程 Javascript

Jquery实现简单的动画效果代码

Posted in Javascript onMarch 18, 2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="http://demo.3water.com/jslib/jquery/jquery-1.7.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$("#panel").css("opacity", "0.1");//设置透明度 
$("#panel").click(function () { 
$(this).animate({ left: "400px", height: "200px", opacity: "1" }, 3000)//在3秒内向右移动400px,高度放大200px，透明度改为1 
.animate({ top: "200px,width:200px" }, 3000) 
.fadeOut("slow"); //以淡出的方式隐藏 
}); 
}) 
</script> 
</head> 
<body> 
<div id="panel" style=" position:relative; background-color:Olive; height:100px; width:100px; border:1px; border-color:Aqua;"> 
</div> 
</body> 
</html>

Jquery实现简单的动画效果代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript基础第一章 JavaScript与用户端

Jul 22 Javascript

AngularJS控制器之间的数据共享及通信详解

Aug 01 Javascript

js图片切换具体实现代码

Oct 13 Javascript

JS实现图片点击后出现模态框效果

May 03 Javascript

ES6中Array.copyWithin()函数的用法实例详解

Sep 16 Javascript

深入理解Vue.js源码之事件机制

Sep 27 Javascript

vue-resource拦截器设置头信息的实例

Oct 27 Javascript

vue 自定义组件 v-model双向绑定、父子组件同步通信的多种写法

Nov 27 Javascript

jQuery实现左右两个列表框的内容相互移动功能示例

Jan 27 jQuery

angularjs自定义过滤器demo示例

Aug 24 Javascript

微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)

Apr 11 Javascript

Selenium执行JavaScript脚本的方法示例

Dec 31 Javascript

文本框获得焦点和失去焦点的判断代码

Mar 18 #Javascript

jQuery控制图片的hover效果（smartRollover.js）

Mar 18 #Javascript

基于jQuery的弹出框插件

Mar 18 #Javascript

js性能优化如何更快速加载你的JavaScript页面

Mar 17 #Javascript

Jquery命名冲突解决的五种方案分享

Mar 16 #Javascript

让人期待的2011年度最佳 jQuery 插件分享

Mar 16 #Javascript

JavaScript异步调用定时方法并停止该方法实现代码

Mar 16 #Javascript