jQuery基础--动画操作
- 三组基本动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏"> <div></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () { $("input").eq(0).click(function () { //show不传参数，没有动画效果
//$("div").show(); //show(speed)
//speed:动画的持续时间 可以是毫秒值 还可以是固定字符串
//fast:200ms normal:400ms slow:600
//$("div").show("ddd"); // show([speed], [callback])
$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})
});
$("input").eq(1).click(function () {
$("div").hide();
}) });
</script>
</body>
</html>
滑入滑出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换"> <div></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () { //滑入（slideDown） 滑出：slideU
$("input").eq(0).click(function () { //slideDown：如果不传参数，有一个默认值normal
//$("div").slideDown();
//$("div").slideDown(1000);
$("div").slideDown(1000, function () {
console.log("额呵呵");
});
}); $("input").eq(1).click(function () {
$('div').slideUp();
}) $("input").eq(2).click(function () { //如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})
});
</script>
</body>
</html>
淡入淡出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换"> <div></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () { //淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
$("input").eq(0).click(function () { $("div").fadeIn(2000); }); $("input").eq(1).click(function () {
$("div").fadeOut(1000);
}) $("input").eq(2).click(function () { //如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();
})
});
</script>
</body>
</html>
下拉菜单案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
} .wrap li {
background-image: url(imgs/libg.jpg);
} .wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
} .wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
} .wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () { //mouseover：鼠标经过事件
//mouseout:鼠标离开事件 //mouseenter:鼠标进入事件
//mouseleave：鼠标离开事件 var $li = $(".wrap>ul>li"); //给li注册鼠标经过事件，让自己的ul显示出来
$li.mouseenter(function () {
//找到所有的儿子，并且还得是ul //stop：停止当前正在执行的动画
$(this).children("ul").stop().slideDown();
}); $li.mouseleave(function () {
$(this).children("ul").stop().slideUp();
}); });
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div> </body>
</html>
轮播图案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>京东商城</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
} .slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
} .slider li {
position: absolute;
display: none;
} .slider li:first-child {
display: block;
} .arrow {
display: none;
} .slider:hover .arrow {
display: block;
} .arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
} .arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
} .arrow-left {
left: 0;
} .arrow-right {
right: 0;
} </style>
</head>
<body>
<div class="slider">
<ul>
<li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () { var count = 0; $(".arrow-right").click(function () {
count++; if(count == $(".slider li").length){
count = 0;
}
console.log(count);
//让count渐渐的显示，其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
}); $(".arrow-left").click(function () {
count--; if(count == -1){
count = $(".slider li").length - 1;
}
console.log(count);
//让count渐渐的显示，其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
}) });
</script> </body>
</html>
- 自定义动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#box2 {
background-color: blue;
margin-top: 150px;
} #box3 {
background-color: yellowgreen;
margin-top: 300px;
}
</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () { //第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数
$("#box1").animate({left:800}, 8000); //swing:秋千 摇摆
$("#box2").animate({left:800}, 8000, "swing"); //linear:线性 匀速
$("#box3").animate({left:800}, 8000, "linear", function () {
console.log("hahaha");
});
})
});
</script>
</body>
</html>
手风琴案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
width: 1300px;
} #box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
} #box li {
width: 240px;
height: 400px;
/*border: 1px solid #000;*/
float: left;
} </style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
var $li = $("#box li"); for (var i = 0; i < $li.length; i++) {
$li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
} //给所有的li注册鼠标经过事件
$li.mouseenter(function () {
$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
}).mouseleave(function () {
$li.stop().animate({width:240});
}); });
</script>
</body>
</html>
动画队列
$(function () {
$("#btn").click(function () {
//把这些动画存储到一个动画队列里面
$("div").animate({left:800})
.animate({top:400})
.animate({width:300,height:300})
.animate({top:0})
.animate({left:0})
.animate({width:100,height:100})
})
});
停止动画操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div></div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
$("div").slideDown(4000).slideUp(4000);
}); $("input").eq(1).click(function () {
//stop:停止当前正在执行的动画
//clearQueue:是否清除动画队列 true false
//jumpToEnd:是否跳转到当前动画的最终效果 true false //.stop().animate();
$("div").stop(true, true);
})
});
</script>
</body>
</html>
jQuery基础--动画操作的更多相关文章
- jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 发文不易,转载请注明出处~ 一．显示.隐藏 jQuery 中显示方法 ...
- JQuery基础DOM操作
DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...
- 前端jQuery之动画操作及相关演示
1.显示动画 1.1无参数,直接让指定的元素显示出来 $("div").show(); 1.2通过控制宽高,透明度,display属性逐渐显示,指定时间现实完毕 $('div'). ...
- jQuery基础--CSS操作、class操作、attr操作、prop操作
1.1.1 css操作 功能:设置或者修改样式,操作的是style属性. 设置单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使 ...
- Jquery基础之动画操作
Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...
- jQuery基础（四）动画
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法. ...
- jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
- jQuery里面的常用的事件和基础动画的实现
一:了解jquery里面常用的事件 二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...
- jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...
随机推荐
- 引入maven以外的jar包
这里有2个案例,需要手动发出Maven命令包括一个 jar 到 Maven 的本地资源库. 要使用的 jar 不存在于 Maven 的中心储存库中. 您创建了一个自定义的 jar ,而另一个 Mave ...
- P5504 [JSOI2011]柠檬
传送门 显然考虑 $dp$ ,发现从右往左和从左往右是一样的,所以只考虑一边就行 发现对于切的左右端点,选择的 $s0$ 一定要为左右端点的贝壳大小,不然这个端点不产生贡献还不如分开来单个贡献 所以设 ...
- 让鼠标滚轮在WINDOWS系统中也和MAC一样滚动（WIN系统鼠标滚轮反向）
用习惯MAC系统偶尔要用用WINDOWS系统,或者由于各种原因总之时不时需要由MAC转向WIN系统或同时需要两个平台机器上倒腾来倒腾去的同学,一般来说最痛苦的就是鼠标滚轮方向不一致. 基本上我们知道苹 ...
- javascript（DOM）实例
JavaScript学习笔记 JS补充笔记 实例之跑马灯,函数创建.通过ID获取标签及内部的值,字符串的获取与拼接.定时器的使用 使用定时器实现在console中打印内容 Dom选择器使用与调试记录 ...
- WinForm的RadioButton使用小技巧
http://www.cnblogs.com/sjrhero/articles/1883155.html 当多个RadioButton同在一个容器里面的时候,多半的操作都是要得到其中一个的值这个时候我 ...
- Linux环境下安装Django和Python
1 下载前准备操作:安装相关的依赖库(工具包) yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel ...
- 如何在虚拟机VM安装windows 2008R2
1.首先确保已经安装好VM软件后进行以下操作.首先点击"文件"->再点击新建虚拟机.如图 2.点击新建虚拟机后会弹出如图所示,可以点击"典型",这里建议选 ...
- vue 和react中子组件分别如何向父组件传值
vue子组件和父组件双向传值: 子: Vue.component("childComponent",{ template:`<div><p @click='pos ...
- linux下挂载U盘方法
1.使用 cat /proc/partitions 查看系统现在有哪些分区:[root@localhost ~]# cat /proc/partitions major minor #blocks ...
- 详解webpack4打包--新手入门（填坑）
注意,这个dev和build好像在哪儿见过??对了, 刚刚才在package.json里配置的“scripts”这一项的值就有“dev”和“build”.对,一点都不错,就是这2个值,这2个值代表的是 ...