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 ...
随机推荐
- react使用swiper,解决添加点击事件首位图片点击失效，解决轮播按钮被覆盖问题
JS部分 createSwiper1() { var option = { // slidesPerView: 5, slidesPerView: 3, centeredSlides:true, }; ...
- JZOJ100045 【NOIP2017提高A组模拟7.13】好数
题目 题目大意 首先有一个定义: 对于一个数,如果和它互质的数可以组成一个等差数列,那么这个数叫"好数". 现在给你一个数列,有三种操作: 1.询问一段区间内的好数的个数. 2.将 ...
- Django项目：CRM(客户关系管理系统)--71--61PerfectCRM实现CRM学生上传作业
# student_urls.py # ————————60PerfectCRM实现CRM学生上课记录———————— from django.conf.urls import url from bp ...
- spark dataframe 将null 改为 nan
由于我要叠加rdd某列的数据,如果加数中出现nan,结果也需要是nan,nan可以做到,但我要处理的数据源中的nan是以null的形式出现的,null不能叠加,而且我也不能删掉含null的行,于是我用 ...
- sql错误;The user specified as a definer ('tester'@'%') does not exist
在复制和导数据库时提示错误:SELECT command denied to user 'tester'@'%' for column 'uID' in table 'view_enterprise_ ...
- Maven实战01_Maven简介
1:何为Maven Maven:中文翻译为"知识的积累",也可翻译为"专家"或"内行". 谈到Maven,就不得不提"构建(bui ...
- 逻辑备份(mysqldump/select into outfile)
#mysqldump备份 shell> mysqldump -uroot -p -P4306 sakila actor>E:\sakila-actor.sql shell> mysq ...
- 同一浏览器中同一JavaWeb程序不共享session方法
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/b2084005/article/details/302227351.要求 在使用struts1开发J ...
- 部分树形DP的优化
ural1018. Binary Apple Tree 题目大意 有一棵n个节点的树,树上每个节点有一个值,选择m个节点使这些节点值的和最大 要求:如果选当前节点,则必须选它的父节点 解法: 我们设d ...
- Luogu P1963 [NOI2009]变换序列(二分图匹配)
P1963 [NOI2009]变换序列 题意 题目描述 对于\(N\)个整数\(0,1, \cdots ,N-1\),一个变换序列\(T\)可以将\(i\)变成\(T_i\),其中\(T_i \in ...