jq动画和停止动画
使用jq 实现动画循环效果 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
height: 200px;
background-color: green;
font-size: 60px;
color: white;
}
.item {
width: 200px;
height: 200px;
position: fixed;
top: 0;
left: 0;
background-color: red;
}
</style>
</head>
<body> <div class="item"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script> function run(){
$('.item').animate({
width: '50px',
height : '50px',
// backgroundColor : 'yellow',
//animate不支持背景色的变化，要导入一个jq实现的颜色库
top: '300px',
left : '300px'
},5000,function(){
$('.item').animate({
width: '200px',
height : '200px',
top: '0',
left : '0'
},3000,run);
});
}; run();
// 接受三个参数，第一个是对象，接受目标样式列表； 第二个是时间；第三个是执行完成的回调函数
</script>
</body>
</html>
吧执行的代码封装在函数里，并作为他自己的回调函数。就可以实现动画的反复实现
色彩动画不包含在核心jq库中~~~
padding-left 之类的值要写成驼峰的命名方法
然后，改变的样式，也可以做相对值的运算，相对于原有值
$('.item').animate({
width: '+=200px',
height: '-=50px'
},3000);
也可以使用预设的值 "show"、"hide" 或 "toggle"：
举个栗子~~
$('.item').animate({
width: 'hide'
}, 3000);
给元素设置了多个animate动画时，会按设置顺序逐一执行。不会产生覆盖。
举个栗子~
<div class="item">いのししですね</div>
<button class="btn">button</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$("button").click(function () {
var div = $("div");
div.animate({
height: '300px',
opacity: '0.4'
}, "slow");
div.animate({
width: '300px',
opacity: '0.8'
}, "slow");
div.animate({
height: '100px',
opacity: '0.4'
}, "slow");
div.animate({
width: '100px',
opacity: '0.8'
}, "slow");
});
jq停止动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .wrap {
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body> <button class="btn1">start</button>
<button class="btn2">end</button> <div class="wrap"> </div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.btn1').click(function(){
$('.wrap').animate({
width: '100vw',
height : '100vh'
},8000);
});
$('.btn2').click(function(){
$('.wrap').stop();
});
</script>
</body>
</html>
https://www.cnblogs.com/sandraryan/
jq动画和停止动画的更多相关文章
- jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jQuery 开始动画，停止动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery动画之停止动画
语法格式: $(selector).stop(true, false); 第一个参数: + ture: 后续动画不执行 false:后续动画会执行 第二个参数: true: 立即执行完成当前动画 fa ...
- 一排盒子，jq鼠标移入的盒子动画移出停止动画,css动画
css .category > div.active { animation: servicetobig 0.5s ease 1 forwards; } @keyframes serviceto ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- JQuery（二）---- JQ的事件与动画详解
JQuery的事件 /** * 1.事件绑定的快捷方式: */ $("button:eq(0)").dblclick(function(){ alert("hahaah& ...
- jQuery停止动画——stop()方法的使用
很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- stop() 是用于停止动画 :animated 用于判断动画是否在进行中
stop() 是用于停止动画 if($("element").is(":animated")) 用于判断动画是否在进行中
随机推荐
- Minimal coverage (贪心，最小覆盖)
题目大意:先确定一个M, 然后输入多组线段的左端和右端的端点坐标,然后让你求出来在所给的线段中能够 把[0, M] 区域完全覆盖完的最少需要的线段数,并输出这些线段的左右端点坐标. 思路分析: 线段区 ...
- POJ 1845 (洛谷 ：题目待添加)Sumdiv
约数和 题目描述 给出a和b求a^b的约数和. 输入格式: 一行两个数a,b. 输出格式: 一个数表示结果对 9901 的模. Input 2 3 Output 15 SB的思路: 这是一道典型的数论 ...
- Leetcode888.Fair Candy Swap公平的糖果交换
爱丽丝和鲍勃有不同大小的糖果棒:A[i] 是爱丽丝拥有的第 i 块糖的大小,B[j] 是鲍勃拥有的第 j 块糖的大小. 因为他们是朋友,所以他们想交换一个糖果棒,这样交换后,他们都有相同的糖果总量.( ...
- CentOS下重启uwsgi
使用Django开发项目,每次修改内容无法刷新,重启nginx也无效,每次都重启主机, 网上搜索很多资料,发现可以重启uwsgi来解决问题,但是发现uwsgi重启每个人都不一样,很多人写了脚本重启 我 ...
- 深入浅出Cocoa之类与对象【转】
最近打算写一些ObjC中比较底层的东西,尤其是 runtime 相关的.苹果已经将 ObjC runtime 代码开源了,我们可以从:http://opensource.apple.com/sourc ...
- PHP来控制Linux,ssh2来控制服务器端
注意:我们用PHP来控制Linux,php环境可以在windows也可以在linux,但是我们要控制的机器是一台linux(被控制的linux关闭selinux和firewalld). 如果php在l ...
- jquery 浏览器缓存网页
头部:<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate&q ...
- django模型中auto_now和auto_now_add的区别
auto_now无论是你添加还是修改对象,时间为你添加或者修改的时间. auto_now_add为添加时的时间,更新对象时不会有变动. 补充: 创建类时:DateField表示年月日 DateTime ...
- HTML5环形音乐播放器
在线演示 本地下载
- QT UI 线程为什么卡死？
我的工程是由三个线程处理不同任务构成的,其中UI用于显示,还有数据处理和数据接收发送线程. 在运行的过程中发现由于数据处理线程不及时,超过了设定的100ms,导致UI卡死,几个周期后又恢复,接着又卡死 ...