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 ...
随机推荐
- HZOI2019 星际旅行 欧拉路
题目大意:https://www.cnblogs.com/Juve/articles/11207540.html—————————> 题解:网上都是一句话题解:将所有的边拆成两条,问题变成去掉两 ...
- Python之通配符--提取文件中的内容并输出
前言:我的学习进度其实没有那么快的,因为现在是网络工程师实习,只有晚上一点时间和周末有空,所以周一到周天的学习进度很慢,今天之所以突然跳到通配符是因为工作需要,大体讲一下我的工作需求:网络工程师就是写 ...
- tensorflow使用CPU可以跑（运行），但是使用GPU却不能用的情况
在跑的时候可以让加些选项: with tf.Session(config=tf.ConfigProto(allow_soft_placement=True, log_device_placement= ...
- 入门servlet：request获取请求体数据
@WebServlet("/RequestDemo5") public class RequestDemo5 extends HttpServlet { protected voi ...
- 卷积神经网络中的通道 channel
卷积神经网络中 channels 分为三种: (1):最初输入的图片样本的 channels ,取决于图片类型,比如RGB, channels=3 (2):卷积操作完成后输出的 out_c ...
- 一探前端开发中的JS调试技巧（转）
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
- Html-前端表单校验
先前端校验再跳转action <form action="/hr/kefu/edit_dangan_do.html" method="post" enct ...
- webstorm格式化代码快捷键
ctrl+alt+L 把网易云音乐的快捷键关了就可以了
- springmvc框架使用拦截器实现301永久重定向，其实用过滤器应该是更好
做seo的朋友提出要求 所有不带www.的访问需要301到带www的域名,以集中权重 可以使用过滤器检查servername带不带www,也可以使用拦截器 不会配置过滤器,所以先用拦截器实现吧,不过我 ...
- db link的查看创建与删除 1
1.查看dblink select owner,object_name from dba_objects where object_type='DATABASE LINK'; 或者 select * ...