`

9-6(animate多重动画1)

jquery同时执行多个动画 
阅读更多 
<!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</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 src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
	    $(this).animate({left: "500px",height:"200px"}, 3000);
	})
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
分享到：
| 相同事件名称，不同命名空间执行方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery多重图片无限循环动画效果.zip

    jQuery多重图片无限循环动画效果是一种常见的网页动态展示技术，它结合了JavaScript库jQuery的强大功能，为网站的图片展示带来生动有趣的用户体验。这种效果通常应用于图片相册、轮播广告或产品展示等场景，使得用户...

    jQuery中animate的几种用法与注意事项

    ### 四、多重动画 可以同时执行多个动画，只需在`animate()`中指定多个CSS属性，如： ```javascript $(this).animate({ left: "+=25px", height: "+=20px" }, 1000); ``` ### 五、按顺序执行动画 若要按顺序执行...

    iOS动画- 新浪微博 点击发微博按钮

    - **动画组**：如果有多重动画需要同时执行，可以使用`UIView.animateKeyframes(withDuration:delay:options:animations:completion:)`。 - **动画完成回调**：确保在动画结束时有合适的回调函数，以便进行下一步...

    @keyframes规则实现多重背景的CSS动画

    在本文中，我们将深入探讨如何使用`@keyframes`规则来实现CSS动画，特别是多重背景的动画效果。`@keyframes`是CSS3中的一个关键帧规则，它允许开发者定义一个动画的过程，从起始状态逐步过渡到结束状态。这个过程...

    jquery动画教程。。。。。。。。。。。。。。。。

    #### 五、多重动画与动画队列 **1. 同时执行多个动画** 可以同时调整多个CSS属性，实现复合动画效果。如： ```javascript $(this).animate({width: "300px", height: "200px"}, 1000); ``` **2. 按顺序执行多个...

    多重CSS背景动画实现方法示例

    本篇文章将详细解释如何使用CSS来实现多重背景动画。 首先，创建多重背景的基本语法是通过在`background-image`属性中使用逗号分隔每个图像的URL。以下是一个例子： ```css .animate-area { background-image: ...

    jquery实现无比性感的多重图片滑动展示效果.zip

    jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得开发这种互动性丰富的图片滑动展示变得轻而易举。 首先，让我们了解jQuery的核心概念。jQuery通过提供链式调用、选择器、事件处理和...

    matlab动画设计教程

    例如，可以通过定时更新图形的某些属性（如数据、颜色、线条样式等）来创建动画，或者利用`animate`函数来实现更为复杂的动画控制。 通过学习和实践这些二维图形绘制方法，初学者能够逐步掌握MATLAB的基础绘图技巧...

    详解jQuery中基本的动画方法

    由于jQuery内部使用了一个运动队列来处理动画，因此在实现多重动画时，可以使用链式写法，即连续调用多个方法。例如，`$('.div').animate({width:'+=50px'}, 600).animate({height:'300px'}, 600);`将先改变元素的...

    jQuery多重图片无限循环动画效果特效代码

    jQuery提供了`.animate()`方法，可以用于创建自定义的动画效果，包括改变元素的位置、大小、颜色等属性。这个方法接受一个包含CSS属性和它们的目标值的对象，一个完成动画后的回调函数，以及可选的动画速度和是否...

    jQuery学习笔记（一）

    - 多重选择器：`$("selector1, selector2")` 可以同时选取符合多个选择器的元素。 ### 2. DOM操作 jQuery提供了一系列方法来操作DOM（文档对象模型）： - `$(selector).append(content)` 在匹配元素的末尾添加...

    editplus html5 css3 JQuery 语法文件html5 css3.0 jQueryAPI手册

    4. **动画**：`fadeIn()`, `slideToggle()`, `animate()`等方法提供流畅的动画效果。 5. **Ajax**：`$.ajax()`, `$.get()`, `$.post()`等函数简化了异步数据请求。 6. **插件**：JQuery生态系统中有大量的插件，用于...

    CreatingExtensionsPluginsComponents

    - **Animate Mixin**：提供动画功能。 在实际应用中，可以通过以下步骤实现混入： 1. **包含混入**：在定义类时通过 `mixins` 属性包含所需的混入类。 2. **执行混入构造器**：确保混入的构造器在主类构造器之前被...

    css3.0+html5+jQuery1.9

    3. **动画效果**：`.fadeIn()`, `.slideToggle()`, `.animate()`等方法使创建复杂的动画变得简单。 4. **Ajax处理**：`.ajax()`, `.getJSON()`, `.load()`等方法简化了异步数据请求和处理。 5. **兼容性**：jQuery...

    CSS3彩色圆点排列背景特效

    在这个例子中，`.dot`定义了圆点的基本样式，`.red-dot`, `.blue-dot`, `.green-dot`分别设置了不同颜色，`.animate`则为圆点添加了上下移动的动画。通过调整这些参数，你可以创建出自己独特的彩色圆点背景特效。 ...

    考博英语词汇表

    1. **abate v. 减轻，减退；废除** - 在学术研究或法律文献中，用来描述某种状况（如环境污染、法律制度等）的减轻或废止。 2. **agile a. 敏捷的，灵活的** - 常用于描述个人或组织在面对变化时所展现出来的...

    最容易学习的JQuery选择器说明文档

    5. **多重选择器**：使用逗号`,`分隔多个选择器，同时选取这些选择器匹配的所有元素。 - 示例：`$("div, span, p.myClass")` —— 选取所有`&lt;div&gt;`、`&lt;span&gt;`元素及带有`myClass`类的`&lt;p&gt;`元素。 #### 层级选择器 ...

    jQuery查询

    - 多重选择器：`$("div, span")` 选取所有`&lt;div&gt;`和`&lt;span&gt;`元素。 - 属性选择器：`$("[href]")` 选取所有具有`href`属性的元素。 - 伪类选择器：`$("input:checked")` 选取所有被选中的`&lt;input&gt;`元素。 ## jQuery...

Magicbox
Global site tag (gtag.js) - Google Analytics