编程 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在事件监听方面的兼容性小结

Apr 07 Javascript

Jquery自定义button按钮的几种方法

Jun 11 Javascript

jQuery中live()方法用法实例

Jan 19 Javascript

tablesorter.js表格排序使用方法(支持中文排序)

Feb 10 Javascript

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

Oct 19 jQuery

vue中的event bus非父子组件通信解析

Oct 27 Javascript

vue 引入公共css文件的简单方法(推荐)

Jan 20 Javascript

详解通过源码解析Node.js中cluster模块的主要功能实现

May 16 Javascript

Angular4 反向代理Details实践

May 30 Javascript

js get和post请求实现代码解析

Feb 06 Javascript

在Vue 中获取下拉框的文本及选项值操作

Aug 13 Javascript

Vue实现图书管理小案例

Dec 03 Vue.js

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

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