<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pic").hide();
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(true);
});
$("#box").blur(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#start").blur(function(){
$("#box").start(true);
});
$("#box").mouseover(function(){
$("#box").css("background-color","yellow");
});
$("#box").mouseout(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
$("#box").css("background-color","blue");
});
$("#pic").mouseover(function(){
$("#pic").animate({backgroundPosition:"40% 40%"},0);
});
$("#test").mouseover(function(){
$("#pic").toggle(5222);
});
$("#test").mouseout(function(){
$("#pic").toggle(2222);
});
});
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
<br><br>
<div id="test">
鼠标放上来
</div>
<div id="pic">
<img src="a.jpg" alt="图片" >这个图片啊</img>
</div>
</body>
</html>
分享到：
相关推荐
在“jQuery动画效果”这个主题中，我们将深入探讨jQuery如何帮助开发者创建吸引人的、动态的用户界面。 1. **基本动画** jQuery 提供了一系列的基本动画方法，如 `fadeIn()`, `fadeOut()`, `slideToggle()` 和 `...
《jQuery动画效果与鼠标响应菜单》 在网页设计中，用户界面的交互性和吸引力是至关重要的，其中菜单导航系统作为用户与网站互动的桥梁，其设计尤为重要。本篇将深入探讨"jQuery动画效果多功能菜单"这一主题，它利用...
在学习jQuery动画效果时，首先要知道的是，jQuery为开发者提供了一系列预定义的动画效果函数，这些函数可以用于实现元素的显示、隐藏以及淡入淡出等动态效果。动画效果使得页面元素能够以更流畅和吸引人的方式与用户...
"jQuery动画效果多功能菜单"是一个专为学习设计的项目，它展示了如何利用jQuery创建出吸引人的、具有动画效果的菜单，以增强用户体验并提升网页的视觉吸引力。 jQuery中的动画功能主要通过几个核心函数来实现，如`...
在"jquery动画效果导航栏"项目中，`style.css`是用于定义导航栏样式的关键文件。CSS（层叠样式表）允许我们控制元素的外观，如字体、颜色、布局等。我们可以设置导航栏的背景色、文字样式、悬浮效果，以及当鼠标悬停...
"jQuery动画效果悬浮菜单.zip" 是一个专门用于创建动态、吸引人的网站菜单的资源包，利用了JavaScript库jQuery的强大功能。jQuery简化了HTML文档遍历、事件处理、动画效果和Ajax交互，使得开发复杂的网页交互变得...
jQuery 动画效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net !!
在本项目"jQuery动画效果多功能"中，重点是利用jQuery实现图片的滚动播出，这种功能常见于公司产品介绍，能够吸引用户注意力，提升用户体验。 首先，我们来深入理解jQuery的核心动画API。jQuery提供了多种方法来...
jQuery是一个强大的JavaScript库，特别以其简洁的API和丰富的动画效果而闻名。在JavaScript的世界里，jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本项目着重探讨jQuery中的动画效果，这些效果能够为...
<id>shop_index_goods_lh 首页商品轮换 <file>shop_index_goods_lh.php</file> <thumbnail></thumbnail>
本项目聚焦于利用jQuery和CSS3创建具有弹性动画效果的工具栏菜单，旨在提升用户体验并增加网页的交互性。 jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互。在本项目中，...
《jQuery之动画效果详解》 jQuery作为一款强大的JavaScript库，其动画效果功能是其深受开发者喜爱的一大特性。本文将深入探讨jQuery中的各种动画...掌握这些基本的jQuery动画效果，将使你在网页交互设计上更具创造力。
在本案例中，"jQuery添加背景动画效果插件.zip" 提供了一种方法，通过使用jQuery来实现网页背景的动态效果。这些效果可能是渐变、滑动、旋转等多种视觉变换，以增强用户体验和网站的视觉吸引力。 首先，我们要理解...
"jQuery 模拟的鼠标动画菜单效果"是一个利用 jQuery 技术实现的菜单设计，它通过鼠标悬停事件触发特定的动画效果，为用户带来独特的视觉体验。 这个菜单效果的特点在于当鼠标光标悬停在菜单项上时，色块或图标会...
虽然jQuery动画效果丰富，但过多的动画可能会影响页面性能。因此，我们需要合理使用`$(document).ready()`和`$(window).load()`来确保动画在正确的时间执行，同时考虑使用CSS3硬件加速和延迟加载技术优化动画性能。 ...
描述了jquery的几种动画效果,几种常用的动画效果,渐隐渐显的效果等
下面我们将详细探讨jQuery动画效果的实现方式以及与CSS的配合。 一、jQuery动画基础 1. `animate()`函数：这是jQuery最核心的动画方法，可以用来创建自定义的动画效果。例如，我们可以通过改变元素的CSS属性（如`...
- jQuery动画方法可以链式调用，但某些动画方法需要在`.stop()`方法之后才能继续。 - 对于动画效果，建议先测试在不同浏览器上的表现，确保兼容性。 通过掌握上述知识点，可以灵活使用jQuery实现各种交互动效，增强...
而`jquery.easing.js`插件正是jQuery动画效果的一个扩展，它为开发者提供了更精细的动画控制，实现了直线匀速运动、变加速运动以及缓冲等复杂动画效果。 **1. 插件简介** `jquery.easing.js`是基于jQuery的一款轻量...
- jQuery事件绑定和动画效果的编写：为菜单的各级项绑定点击或鼠标悬停事件，并在触发时执行相应的jQuery动画效果，如展开和收缩子菜单。 具体到代码实现，可以通过以下步骤： 1. 定义HTML结构，并确保每个可交互...