jQuery控制DIV层实现由大到小，由远及近动画变化效果
更新时间：2015年10月09日 10:22:42 作者：企鹅
这篇文章主要介绍了jQuery控制DIV层实现由大到小，由远及近动画变化效果,涉及jQuery基于animate方法操作页面元素实现动画渐变效果的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery控制DIV层实现由大到小，由远及近动画变化效果。分享给大家供大家参考。具体如下：
这里介绍jQuery控制DIV由大到小，由远及近动画变化效果，使用jquery生成动画效果的一个小例子，希望大家喜欢。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-div-animate-cha-style-demo/
具体代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel控制Div运动，由大到小变化。</title>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$("#panel").css("opacity", "0.5");//设置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
.animate({top: "200px" , width :"200px"}, 3000 ,function(){
$(this).css("border","5px solid blue");
})
});
});
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jquery formvalidator插件是不错的国产验证插件了，做点普通的校验也是很方便的，但最近遇到个问题，发现如果表单整个表单是AJAX提交时，就不能按传统的做法了2013-01-01
本文主要分享了jquery实现自适应banner焦点图的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
使用jquery实现的文字向上滚动效果多的不计其数吧，间歇向上滚动却不是那么的多，所以本文简单的实现了一个，感兴趣的朋友可以参考下哈2013-06-06
jquery选择器，比较常用的选择器说明，学习jquery的朋友一定要学习与了解的知识。2010-09-09
本文介绍一个treepanel动态加载数据的例子，需要了解的朋友可以参考下2012-12-12
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
这篇文章主要介绍了jquery.validate自定义验证用法,结合实例形式分析了jQuery成功提示与择要提示验证操作相关实现与使用技巧,需要的朋友可以参考下2020-06-06
使用jquery DataTable和ajax向页面显示数据列表的方法
今天小编就为大家分享一篇使用jquery DataTable和ajax向页面显示数据列表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
如果在iframe中使用则弹不出对话框，而有时候我们还必须得使用iframe而不能用jQuery的load方式，下面有个不错的处理方法，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了jquery实现拖拽table表头改变列宽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
jQuery is not defined 错误原因与解决方法小结
今天在测试一个程序的时候，明显已经加载了jquery但总是提示jQuery is not defined，经过多方测试终于发现了问题，这里简单总结一下,需要的朋友可以参考下2017-03-03
最新评论