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 ...
随机推荐
- windwos API 第七篇 分离路径，组合路径 _splitpath _makepath
函数原型: //Break a path name into components. void _splitpath( const char *path, char *drive, char *dir ...
- HZOI2019熟练剖分(tree)
题目大意:https://www.cnblogs.com/Juve/articles/11186805.html 题解: 先给出官方题解: 其实这题跟期望没什么关系,因为E=$\sum_\limits ...
- jQuery3动画+创建元素
一.jQuery的动画 1.jQuery自带的动画 1>变化的是width height opacity display <!DOCTYPE html> <html lang= ...
- Django项目：CRM(客户关系管理系统)--65--55PerfectCRM实现CRM客户报名状态颜色变化
# kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...
- mysql函数，语法
转自:http://www.cnblogs.com/kissdodog/p/4168721.html MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: ...
- php表单字段
在上一章节我们已经介绍了表的验证规则,我们可以看到"Name", "E-mail", 和 "Gender" 字段是必须的,各字段不能为空. ...
- jeecms v9导入myeclipse 2015 ehcache.xml报错问题
1.找不到ehcache.xml文件问题 cache-context.xml <property name="configLocation"> <value> ...
- JavaScript怎么解析后台传入的json字符串
var data = "{'name': '张三', 'age': 23, 'gender': true}"; //json字符串 var jso = JSON.parse(dat ...
- Maven实战05_背景案例学Maven模块化
1:简单的账户注册服务 注册互联网账户是日常生活中再熟悉不过的一件事,作为一个用户,注册账户的时候需要进行以下操作,提供以下信息. 提供一个未被使用的帐号ID 提供一个未被使用的email地址. 提供 ...
- 统一建模语言简介UML
统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际标准.它的特点是简单 ...