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 ...
随机推荐
- idea打包可执行jar
(1)在项目上鼠标右键 --> Open Module Settings 或者点击工具栏上的 (2)Artifacts --> + --> JAR --> From modul ...
- Nginx 的常用命令
nginx命令,先来一波基本操作: start nginx // 启动Nginx nginx -t // 测试配置文件 nginx -v // 查看Nginx版本 nginx -V // 查看Ngin ...
- Python - 基本数据类型及其常用的方法之列表
列表: 特点:用 [] 括起来,切元素用逗号分隔:列表内的元素可以为任何的数据类型. 列表的基本操作: 1.修改 li = [12, 5, 6, ["Aiden", [2, 4], ...
- Spring Cloud Eureka集群配置及注意事项(Greenwich版本)
Spring Cloud Eureka集群配置及注意事项(Greenwich版本) 一·概述 Spring Cloud Netflix Eureka 是一个提供服务注册与发现的套件.服务提供者只需要将 ...
- tensorflow使用CPU可以跑（运行），但是使用GPU却不能用的情况
在跑的时候可以让加些选项: with tf.Session(config=tf.ConfigProto(allow_soft_placement=True, log_device_placement= ...
- Dapper的分页代码
public KeyValuePair<Pagination, IList<AttachmentModel>> AttachmentPagination(Pagination ...
- tp5 报 A non well formed numeric value encountered 的错解决办法
thinkphp5出现A non well formed numeric value encountered的解决办法修改formatDateTime方法如下 默认值: if (is_null($th ...
- HYSBZ 1015/BZOJ1015 星球大战starwar
Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...
- LUOGU P1779 魔鬼杀手_NOI导刊2010提高（03）
传送门 解题思路 背包,首先先用aoe都打残然后单伤补刀,用f[i]表示AOE打了i的伤害的最小花费,g[i]表示单伤打了i的伤害的最小花费. 代码 #include<iostream> ...
- 组合数学起步-排列计数[ZJOI2010][BZOJ2111]
<题面> 数据范围:$1 \leq N \leq 10^6, P \leq 10^9 $ 这个题…… 以为是排列,其实是组合 题目中说是从所有排列中找到Magic的,就是 $p_{i/2} ...