JQ动画
/*
//基本
show([s,[e],[fn]]) 显示元素
hide([s,[e],[fn]]) 隐藏元素 //滑动
slideDown([s],[e],[fn]) 向下滑动
slideUp([s,[e],[fn]]) 向上滑动 //淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],opacity,[e],[fn]]) 让元素的透明度调整到指定数值 //自定义
animate(p,[s],[e],[fn]) 自定义动画
stop([c],[j]) 暂停上一个动画效果,开始当前触发的动画效果 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
.box{
width: 250px;
height: 250px;
background-color: #000;
position: fixed;
top: 50px;
left: 10px;
}
</style>
</head>
<body>
<button class="show">显示[入场]</button>
<button class="hide">隐藏[出场]</button>
<button class="fidein">淡入[入场]</button>
<button class="fideout">淡出[出场]</button>
<button class="slidedown">向下滑动[入场]</button>
<button class="slideup">向上滑动[出场]</button>
<button class="animate">自定义动画</button>
<div class="box"></div>
<script>
$(".show").on("click", function(){
$(".box").show(1000); // 参数1: 时间,单位毫秒 参数2: 执行效果完成以后的回调函数
}); $(".hide").on("click", function(){
$(".box").hide(1000, function(){
alert("找不到我了吧~");
});
}); $(".fidein").on("click", function(){
$(".box").fadeIn(1000);
}); $(".fideout").on("click", function(){
$(".box").fadeOut(1000);
}); $(".slidedown").on("click", function(){
$(".box").slideDown(1000);
}); $(".slideup").on("click", function(){
$(".box").slideUp(1000);
}); // 自定义动画
$(".animate").on("click",function(){
// $(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)
$(".box").animate({
"border-radius":"50%",
"left": "120px",
"top": "200px",
},2000,function(){
$(".box").animate({
"border-radius":"0%",
"left": "10px",
"top": "50px",
},1000,function(){
// $('.animate').trigger("click");
});
});
}); </script>
</body>
</html>
JQ动画的更多相关文章
- （21）jq动画
jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...
- css动画和jq动画的简单区分
有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...
- jq动画设置图片抽奖(修改效果版)
效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...
- 自写Jq动画载入插件
在写网站的时候,有一些dom第一次进入屏幕时需要加一个动画进入效果,如下图 于是,自己就研究下,要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧,并将他的透明度(opacity)设置为0 ...
- jq动画插件，自制基于vue的圆形时钟
首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个“超个性动画版本的个人简历”,通过屏幕上不断打印内容,改变相应样式来实现动画简历,我 ...
- jq动画和停止动画
使用jq 实现动画循环效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- JQ动画的简单介绍
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- JQ动画事件
1.会飞的li html: <ul id="ulL"> <li>中国</li> <li>美国</li> <li&g ...
- jq动画实现左右滑动
<!DOCTYPE html> <html> <head> <title>jquery动画滑动</title> <style type ...
- jq动画设置图片抽奖
(因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累) 预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开 ...
随机推荐
- 为什么大家都在用WebRTC？
WebRTC代表网络实时通信.它是一种非常令人兴奋,强大且具有高度破坏性的尖端技术和标准.自从WebRTC诞生以来,80%的浏览器都开始支持它.有数据显示,2017年~2021年期间,WebRTC市场 ...
- JVM 内存分配、调优案例
内存分配 对象优先在Eden区分配 大多数情况下,对象在新生代Eden区中分配.当Eden区没有足够空间进行分配时,虚拟机将发起一次Minor GC. HotSpot虚拟机提供了-XX:+PrintG ...
- [论文阅读] Residual Attention(Multi-Label Recognition)
Residual Attention 文章: Residual Attention: A Simple but Effective Method for Multi-Label Recognition ...
- 能够进行多段文本匹配的NFA改良算法
下面的代码基于NFA算法实现了在多段字符串中匹配正则表达式,对比NFA算法可以看到它将pc由局部变量提升为类成员,以保存中间匹配状态,另外在匹配成功后将pc恢复到null状态.实际使用中,此类还应该增 ...
- 直流电机、减速器、编码器与TB6612FNG知识整理
之前把MPU6050的相关知识了解了一下,可以做到测量欧拉角,在平衡小车的开发中需要测量小车的倾角来调整小车姿态.接下来该学习小车的电机驱动部分了,这里整理一下直流电机.减速器.编码器以及TB6612 ...
- Linux下MySQL主从复制(Binlog)的部署过程
什么是 MySQL 的主从复制 Mysql内建的复制功能是构建大型高性能应用程序的基础, 将Mysql数据分布到多个系统上,这种分布机制是通过将Mysql某一台主机数据复制到其它主机(slaves)上 ...
- NOIP 模拟 $34\; \rm Equation$
题解 \(by\;zj\varphi\) 发现每个点的权值都可以表示成 \(\rm k\pm x\). 那么对于新增的方程,\(\rm x_u+x_v=k\pm x/0\) 且 \(\rm x_u+x ...
- NOIP 模拟 $14\; \text{影魔}$
题解 \(by\;\;zj\varphi\) 不是原题 一道(对我来说)很需要技巧的题 对于颜色数如何处理 离线,将子树转化为 \(dfs\) 序,但这种做法无法处理深度 我们按照深度加点(可以通过 ...
- 针对Hbuilderx内置终端无法输入问题，总结了三种方法供大家参考
下图,是内置终端无法输入的现象(本人使用的第三种方案,解决了该问题) 第一种解决方案,也是网上推荐最多的方案: 打开Hbuilder安装路径下插件文件夹中的main.js文件:HBuilderX\pl ...
- 多线程之旅(9)_如何安全的取消正在执行的线程——附C#源码
参考网址: https://blog.csdn.net/yangwohenmai1/article/details/90404497 当线程能流畅安全的自动运行后,我们就要考虑一些更风骚的操作,就是如 ...