JQuery--动画队列以及清空队列.stop()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} body {
background: #000;
} .wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
} .wrap li {
float: left;
margin: 0 10px 10px 0;
} .wrap img {
display: block;
border: 0;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
// 当鼠标移入li分区时，图片突出显示
// 当鼠标移出li分区时，图片变回正常
/* 需要添加事件实现排他的时候，尽量添加给有兄弟关系的标签身上 */
/**
* 动画队列
* 动画队列其实JQ动画的特点，只不过有时候这特特点很多时候不需要，
* 所以我们要清空动画队列，实现效果
*
* 清空队列
* 核心函数：
* .stop()
* 默认值：
* .stop(true,false)
* // 第一个参数：是否清除队列
* // 第二个参数：是否跳转到最终效果
*
* */
$(function () {
$('li').mouseenter(function () { $(this).stop().siblings().stop().fadeTo(400,0.4);
$(this).fadeTo(400,1);
})
$('.wrap').mouseleave(function () {
$('.wrap li').stop().fadeTo(400,1);
});
});
</script>
</head>
<div class="wrap">
<ul>
<li><a href="#"><img src="data:images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
</html>
多段动画的用法：
1.同时指向多种动画例子：
// 写在一起
$(this).animate({
height:"0px",
opacity:0.4
},2000);
2.执行队列动画
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(document).ready(function () {
$('.btn').click(function () {
$('.con').animate({bottom:-165})
.animate({right:-320},function () {
alert('请继续保持开机时间');
});
});
});
</script>
JQuery--动画队列以及清空队列.stop()方法的更多相关文章
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- jQuery 动画效果 与 动画队列
基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...
- 深入学习jQuery动画队列
前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...
- jQuery 源码分析(十一) 队列模块 Queue详解
队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...
- 看动画学算法之:队列queue
目录 简介 队列的实现 队列的数组实现 队列的动态数组实现 队列的链表实现 队列的时间复杂度 简介 队列Queue是一个非常常见的数据结构,所谓队列就是先进先出的序列结构. 想象一下我们日常的排队买票 ...
- 队列的C++实现（数组）——创建-进队-出队-返回队首元素-清空队列栈-处理队列
队列的数组实现,从队尾进入,对头删除. 队列长度用标志变量size,它是独立于front和rear的一个变量.size == 0,队列为空.size == capacity,满队列. 一.结点声明 s ...
- JQuery动画animate的stop方法使用详解
JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- jQuery动画特效笔记
show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...
随机推荐
- 前端在本地启动服务预览html页面
在开发移动端项目时浏览器里出来的效果往往到真机上和预想的有出入,在开发过程中知道了一个可以在本地自己启动一个服务器在手机预览的办法. 1.首先在终端安装http. npm i http-server ...
- sde中的shp数据无法编辑
最近整理空间数据库时,用sde比较多,发现在编辑sde中的数据时总是出现数据被锁或者是被其他应用程序占用.用了很多方法处理,但不是每个方法都实用.下面讲的是我在删除shp或者给shp增加字段时所遇到的 ...
- 软件-浏览器-GoogleChrome：Google Chrome
ylbtech-软件-浏览器-GoogleChrome:Google Chrome Google Chrome是一款由Google公司开发的网页浏览器,该浏览器基于其他开源软件撰写,包括WebKit, ...
- MySQL实战总结
极客上买了<MySQL实战45讲>,用导图大致总结后,跟大家分享下
- PAT甲级——A1019 General Palindromic Number
A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...
- 提交代码出现 Push to origin/master was rejected 错误解决方法
转至博客:http://www.xtyos.cn/archives/qt-1-index 为什么会出现这样的问题 一般发生在 GitHub 或 码云 刚刚创建仓库第一次pull的时候,两个仓库的差别非 ...
- 代理模式(Proxy、Subject、RealSubject)（代购火车票）
.(为其他对象提供一种代理以控制对这个对象的访问.) 在实际的软件开发中,我们经常面临着对一个对象进行访问控制的问题,由于跨越网络或安全方面等原因不能直接或不需要直接被访问,直接访问的代价会给系统带来 ...
- shiro+jwt+springboot理解
转自 https://www.cnblogs.com/fengli9998/p/6676783.html https://www.jianshu.com/p/0366a1675bb6 https:// ...
- mac ssh 远程容易断线解决方案
编辑文件 /etc/ssh/ssh_config 添加下面两行 ServerAliveInterval 60 ServerAliveCountMax 3 说明一下: #server每隔60秒发送一次请 ...
- JS 重载页面,本地刷新,返回上一页
JS 重载页面,本地刷新,返回上一页 : <a href="javascript:history.go(-1)">返回上一页</a> <a href= ...