<!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="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*****
animate(params,speed,callback);
(1),params:一个包含样式属性及值的映射比如{propertyp1:"value1",propertyp1:"value2"}
(2).speed,速度参数,可选
(3),callback,在动画完成时执行的函数,可选
*****/
/*1、
$(function() {
$("#panel").click(function() {
$(this).animate({left:"500px"},3000);
});
});
*/
// 2、 累加 ,累减 /*
$(function() {
$("#panel").click(function() {
$(this).animate({ left: "+=500px" }, 3000);//在当前位置累加到500px
});
});
*/ // 3、多重动画
/*
$(function() {
$("#panel").click(function() {
$(this).animate({ left: "+=500px",height:"200px"}, 3000); //向右滑动时放大元素的高度
}); //或: $(this).animate({ left: "+=500px"}, 3000);
$(this).animate({ height:"200px"}, 3000); });
*/ /* //4、综合动画
$(function() {
$("#panel").css("opacity", "0.5"); //设置不透明度
$("#panel").click(function() { $(this).animate({ left: "+=500px", height: "200px", opacity: "1" }, 3000).animate({top:"200px",width:"200px"},300).fadeOut ("slow");
});
});
*/ //5、动画回调函数 ,想要在最后改变样式把fadeout(),改为css();并不能得到预期的效果而应该把css放到回调函数中 $(function () {
$("#panel").css("opacity", "0.5"); //设置不透明度
$("#panel").click(function () { $(this).animate({ left: "+=500px", height: "200px", opacity: "" }, ).animate({ top: "200px", width: "200px" }, , function () { $(this).css("border", "5px solid blue");
})
});
}); </script>
<style type="text/css">
#panel
{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
</head>
<body>
<div id="panel">
</div>
</body>
</html>

Jq自定义动画的更多相关文章

  1. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  2. javascript 自定义动画函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画

    /** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...

  4. android 自定义动画

    android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...

  5. Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析

    这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...

  6. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  7. 自定义动画css属性

    自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyf ...

  8. [UE4]CustomAnimationBlueprintNode 自定义动画蓝图节点

    目的:在AnimationBlueprint中使用自定义动画控制节点. 主要过程: 1.      引用相关模块.在Client.Build.cs文件中,PublicDependencyModuleN ...

  9. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

随机推荐

  1. Ubantu 命令

    进入窗口删除文件(所有文件都可以删除) gksudo nautilus 输入法问题 ibus-daemon -drx

  2. UML学习-时序图

    时序图(Sequence Diagram)是显示对象之间交互的图,这些对象是按时间顺序排列的.顺序图中显示的是参与交互的对象及其对象之间消息交互的顺序.时序图中包括的建模元素主要有:对象(Actor) ...

  3. ORACLE/MYSQL/DB2等不同数据库取前几条记录

    选取数据库中记录的操作是最基础最频繁的,但往往实际应用中不会这么简单,会在选取记录的时候加上一些条件,比如取前几条记录,下面就总结了如何在ORACLE/MYSQL/DB2等一些热门数据库中执行取前几条 ...

  4. jquery动态添加DOM节点

    1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 <html> <head> <meta http-e ...

  5. oracle日记

    win7旗舰版安装oracle11g 64位用sql plus可以登录 但用pl/sql dev报错ORA-12560 小型数据库:access.foxbase 中型数据库:mysql.sqlserv ...

  6. linux访问windows共享文件夹的两种方法

    有时需要在linux下需要访问windows的共享文件夹,可以使用mount挂载或者使用samba连接. 1.mount挂载 首先创建被挂载的目录: $ mkdir windows 将共享文件夹挂载到 ...

  7. Android SqLite升级

    android开发中,如果大家使用到了sqlite就会牵涉到它的升级问题,因为升级后的表结构可能完全不一样,会有字段的添加或者删除等..    sqlite升级思路:      1:将表A重新命名:例 ...

  8. PHP自动生成前端的表单框架

    <?php /** * 为当前所在菜单项样式 * @param string $controller_name * @param string $action_name * @param str ...

  9. project euler 12 Highly divisible triangular number

    Highly divisible triangular number Problem 12 The sequence of triangle numbers is generated by addin ...

  10. List是线程安全的吗?如果不是该怎么办呢?安全的List对性能的影响有多大呢?

    测试条件: 开启2个并行执行任务,往同一个list对象写入值 测试代码: ; static List<int> list = new List<int>(); static v ...