1. Jquery动画效果
1.1) Jquery隐藏与显示DOM
1.2) Jquery淡入和淡出DOM
1.3) Jquery滑动DOM
1.4) Jquery动画
1.5) JquerycallBack回调方法
1.6) Jquery暂停动画
chap05/demo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("#p1").show();
});
$("#b2").click(function(){
$("#p1").hide();
});
$("#b3").click(function(){
$("#d1").fadeOut();
});
$("#b4").click(function(){
$("#d1").fadeIn();
});
$("#b5").click(function(){
// $("#d1").fadeToggle();
// $("#d1").fadeToggle("slow");
$("#d1").fadeToggle(10000);
});
$("#b6").click(function(){
$("#d1").fadeTo("slow",0.1);
$("#d2").fadeTo("slow",0.5);
$("#d3").fadeTo("slow",0.9);
});
$("#b7").click(function(){
$("#d4").slideDown("slow");
});
$("#b8").click(function(){
$("#d4").slideUp("slow");
});
$("#b9").click(function(){
$("#d5").animate({left:'500px'},'slow');
});
$("#b10").click(function(){
$("#d5").animate({
left:'500px',
opacity:0.5,
height:'150px',
width:'150px'
},'slow');
});
$("#b11").click(function(){
$("#d5").animate({
left:'500px',
opacity:0.5,
height:'+=150px',
width:'+=150px'
},'slow');
});
$("#b12").click(function(){
$("#p2").show(function(){
alert("小日本出来了！");
});
});
$("#b13").click(function(){
$("#d6").animate({left:'500px'},'slow');
});
$("#b14").click(function(){
$("#d6").stop();
});
});
</script>
</head>
<body>
<input type="button" value="出来" id="b1"/>
<input type="button" value="滚" id="b2"/>
<p id="p1">小日本</p>
<hr/>
<input type="button" value="淡出" id="b3"/>
<input type="button" value="淡入" id="b4"/>
<input type="button" value="淡入淡出开关" id="b5"/>
<input type="button" value="透明度" id="b6"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: green;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: blue;margin: 10px;"></div>
<hr/>
<input type="button" value="向下滑动" id="b7"/>
<input type="button" value="向上滑动" id="b8"/>
<div id="d4" style="background-color: gray;display: none;height: 100px;width: 500px;">
<p>Java</p>
<p>Java掉渣天！</p>
</div>
<hr/>
<input type="button" value="向左移动" id="b9"/>
<input type="button" value="动画效果2" id="b10"/>
<input type="button" value="动画效果3" id="b11"/>
<!-- <div id="d5" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div> -->
<hr/>
<input type="button" value="回调事件" id="b12"/>
<p id="p2" style="display: none;">小日本</p>
<hr/>
<input type="button" value="向左移动" id="b13"/>
<input type="button" value="停止" id="b14"/>
<div id="d6" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></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结构，并确保每个可交互...