点击某个按钮，实现某个div的动画
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
var i=0;
$("button").click(function(){
i=i+1;
$("#test1").text(i);
$("div").animate({
left:'+=25px',//每次将位置右移25px
top:'+=25px',//每次将位置下移25px
opacity:'-=0.1',//opacity代表透明度，1-0，数字越小代表颜色越浅，透明度越大
height:'+=20px',//每次将所产生动画的div块高度增加20px
width:'+=20px'//每次将所产生动画的div块宽度增加20px
});
});
});
</script>
</head>
<body>
<button id="btn">开始动画</button>
点击次数：<span id="test1">0 </span>
<p>如果需要对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:20px;width:20px;position:absolute;">
</div>
</body>
</html>
设置了一个变量i，用来计算次数点击的显示，以下附件是动画截图。
相关推荐
jQuery UI是基于JavaScript库jQuery的一个扩展，它提供了一系列丰富的用户界面组件，包括但不限于对话框（Dialogs）、日期选择器（Datepickers）、拖放功能（Drag and Drop）、排序功能（Sortable）以及各种可自定义...
《jQuery UI 1.8.x 自定义版本详解》 在Web开发领域，jQuery UI是一个广泛使用的库，它基于流行的JavaScript库jQuery，提供了丰富的用户界面组件和交互效果。本篇文章将详细探讨两个特定版本的jQuery UI——1.8.2....
5. **动画效果**：解释如何利用jQuery UI的内置动画效果，如淡入淡出（Fade）、滑动（Slide）等，增强用户体验。 6. **无障碍性**：讨论如何确保jQuery UI组件符合无障碍性标准，使所有用户都能方便地使用。 7. **...
在IT领域，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本主题中，我们重点关注两个特定的jQuery插件：`jquery-confirm.js`和`jquery-form.js`，它们是jQuery生态中...
3. **Effects**：jQuery UI 提供了一套完整的特效库，如淡入淡出（Fade）、滑动（Slide）、切换（Toggle）等，以及一个用于自定义动画效果的工具集。 4. **Positioning**：这个功能可以帮助开发者精确地定位页面...
- `$(element).animate()`：自定义动画，可以控制速度、缓动函数等。 6. **Ajax交互** - `$.ajax()`：进行异步请求，支持GET和POST等多种HTTP方法。 - `$.get()`/`.post()`：简化版的Ajax请求，用于快速实现GET...
这个文件包含了jQuery UI的所有核心组件，如对话框（Dialog）、拖放（Draggable）、可排序（Sortable）、可折叠（Accordion）、时间选择器（Datepicker）等，以及众多动画效果和实用工具函数。由于进行了压缩，代码...
- **自定义动画（Custom Animations）**：使用 `.animate()` 方法可以创建自定义动画，如改变宽高、透明度等。 **Ajax（Asynchronous JavaScript and XML）：** - **$.ajax()**：核心的异步请求函数，支持 JSON, ...
《jQuery UI 1.8.18 自定义插件与CSS详解》 jQuery UI 是一个基于 jQuery 库的用户界面库，它提供了丰富的交互效果、可定制的主题以及各种UI组件，如日期选择器、对话框、滑块等。在本篇文章中，我们将深入探讨其...
动画效果是jQuery的亮点，$.fn.animate()方法允许开发者创建自定义动画，而$.fn.slideToggle()、$.fn.fadeIn()、$.fn.fadeOut()等预定义的动画函数则提供了常见的过渡效果。 最后，jQuery-2.2.4.js版本中还包含了...
4. **动画效果**：`$.animate()`函数可以创建自定义的动画效果，配合`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等预设动画，为网页增添动态魅力。 5. **Ajax交互**：`.ajax()`, `.get()`, `.post()`等方法让异步...
jQuery的`animate()`函数允许开发者创建自定义的动画效果，通过指定CSS属性的变化来实现平滑过渡。另外，`.fadeIn()`, `.slideUp()`, `.show()`, `.hide()`等预设动画则大大简化了常见的视觉效果。 5. **Ajax交互...
7. **效果 (Effects)**：包括基本动画、过渡效果以及自定义效果，如淡入淡出、滑动等。 8. **自动完成 (Autocomplete)**：为输入字段提供动态建议，常用于搜索或输入辅助。 9. **布局 (Resizable)**：允许用户调整...
3. **动画效果**：内置多种加载动画，如旋转圆圈、波纹扩散等，同时支持自定义动画效果，增加视觉吸引力。 4. **事件绑定**：可以轻松地与Ajax请求或其他事件（如点击、滚动等）绑定，实现自动显示和隐藏加载指示器...
- **动画改进**：`$.animate()`方法得到增强，可以更好地控制动画过程，如自定义 easing 函数和更好的颜色动画支持。 3. **jQuery API 文档**： `jquery1.7_20111204.chm`是jQuery 1.7 API的离线帮助文件，包含了...
在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理以及动画制作。而jquery-confirm则是一个基于jQuery的插件，用于创建美观的弹窗提示，包括确认对话框、警告对话框和自定义对话框。...
jQuery作为一款广泛使用的JavaScript库，极大地简化了DOM操作，事件处理和动画制作等任务。而`jquery-validation`则是jQuery生态中的一款强大插件，用于表单验证，帮助开发者创建用户友好的、功能丰富的表单验证系统...
jQuery是JavaScript的一个库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。jQuery的核心特性包括选择器（用于快速定位DOM元素）、链式调用（方法可以连续执行）和高效的操作DOM。在jQuery-File-Upload中...
jQuery UI 是一个基于 jQuery 库的开源项目，提供了一套完整的用户界面组件，包括可交互的控件、动画效果和可自定义的主题，极大地丰富了网页开发者的工具箱。在本次讨论中，我们将深入剖析“jquery-ui-1.8.18....
除了配置项外，`JQ.jquery-confirm`还提供了API方法来控制对话框，如`$.confirm.close()`关闭对话框，`$.confirm.hideLoading()`隐藏加载动画。 ### 八、与Bootstrap集成 如果你的项目中使用了Bootstrap，`JQ....