jquery的事件没有on,js的有。

1、show()  显示  由小变大缓慢显示

<html lang="en">
<head>
<meta charset="UTF-8">
<title>魔降风云变</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div id="box"></div>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
$('#btn').click(function () {
$('#box').show()
})
</script>
</body>
</html>

按钮.click事件。默认不显示的内容.show(),显示出来

一开始是没有的:

点击一下就出现了。

show中可以添加毫秒,1000毫秒是一秒。由小变大缓慢显示

<html lang="en">
<head>
<meta charset="UTF-8">
<title>魔降风云变</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div id="box"></div>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
$('#btn').click(function () {
$('#box').show()
})
</script>
</body>
</html>
        $('#btn').click(function () {
$('#box').show(2000)
})

2、hide()  隐藏  由大到小指定速度隐藏

<html lang="en">
<head>
<meta charset="UTF-8">
<title>魔降风云变</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
/*display: none;*/
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div id="box"></div>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
$('#btn').click(function () {
$('#box').hide()
})
</script>
</body>
</html>
        $('#btn').click(function () {
$('#box').hide()
})

3、show,hide指定时间显示隐藏动画结合

<html lang="en">
<head>
<meta charset="UTF-8">
<title>魔降风云变</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div id="box"></div>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
$('#btn').click(function () {
if($(this).text()==='显示'){ //jq节点对象.text() 获取节点文本
$(this).text('隐藏') //jq节点对象.text('内容') 修改节点的文本
$('#box').show(2000) //jq节点对象.show()显示display:none的内容
}else { //jq节点对象.show(2000) 指定时间由小到大显示display:none的内容
$(this).text('隐藏');{
$(this).text('显示') //jq节点对象.hide() 隐藏显示的内容
$('#box').hide(2000) //jq节点对象.hide(2000)指定时间由大到小隐藏显示的内容
} // if小花else花是判断语句。 对象.事件(函小花)是绑定事件 小中if条件事件无。
} })
</script>
</body>
</html>

文件比图片变化快,想要图片放大或缩小之后再变文字:

    <script type="text/javascript">
$('#btn').click(function () {
if($(this).text()==='显示'){ $('#box').show(2000,function () {
$('#btn').text('隐藏') //对象.show(毫秒,这么多毫秒之后做的函数)
} ) //不能用$(this),它在这里不是btn
}else {
$(this).text('隐藏');{ $('#box').hide(2000,function (){ //对象.hide(毫秒,这么多毫秒之后做的函数)
$('#btn').text('显示')
})
}
} })
</script>

3、toggle()记录点击次数

点击一下变化一下。当给toggle一个时间参数的时候,如果点击次数过快,他会记录点击次数。如果你停止点击了,但是记录的次数还没执行完,他会继续执行直到点击次数次执行结束

<html lang="en">
<head>
<meta charset="UTF-8">
<title>魔降风云变</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div id="box"></div>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
$('#btn').click(function () {
$('#box').toggle()
})
</script>
</body>
</html>
    <script type="text/javascript">
$('#btn').click(function () {
$('#box').toggle()
})
</script>

这时需要添加stop方法,先停止掉再开。

 $('#box').stop().toggle(1000)

使用场景:

原文链接:https://www.cnblogs.com/majj/p/9113627.html

jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能。

显示动画

方式一:

  $("div").show();

解释:无参数,表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二:

$('div').show(3000);

解释:通过控制元素的宽高、透明度、display属性,逐渐显示,2秒后显示完毕。

方式三:

 $("div").show("slow");

参数可以是:

  • slow 慢:600ms

  • normal 正常:400ms

  • fast 快:200ms

解释:和方式二类似,也是通过控制元素的宽高、透明度、display属性,逐渐显示。

方式四:

 //show(毫秒值,回调函数;
$("div").show(5000,function () {
alert("动画执行完毕!");
});

解释:动画执行完后,立即执行回调函数。

总结:

上面的四种方式几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画结束后执行的回调函数。

隐藏动画

方式参照上面的show()方法的方式。如下:

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

实现点击按钮显示盒子,再点击按钮隐藏盒子

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: green;
border: 1px solid red;
display: none;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script> <script type="text/javascript"> //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
var isShow = true;
$('#btn').click(function(){
if(isShow){
$('#box').show('slow',function(){
$(this).text('盒子出来了');
$('#btn').text('显示');
isShow = false;
})
}else{
$('#box').hide(2000,function(){
$(this).text('');
$('#btn').text('隐藏');
isShow = true; })
}
}) </script>
</html>

开关式显示隐藏动画

$('#box').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法:就是先执行show(),再执行hide()。

代码如下:

    $('#btn').click(function(){
$('#box').toggle(3000,function(){
$(this).text('盒子出来了');
if ($('#btn').text()=='隐藏') {
$('#btn').text('显示');
}else{
$('#btn').text('隐藏');
}
});
})

滑入和滑出

1、滑入动画效果:(类似于生活中的卷帘门)

$(selector).slideDown(speed, 回调函数);

解释:下拉动画,显示元素。

注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)

2、滑出动画效果:

 $(selector).slideUp(speed, 回调函数);

解释:上拉动画,隐藏元素。

3、滑入滑出切换动画效果:

 $(selector).slideToggle(speed, 回调函数);

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
background-color: green;
}
</style> <script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () { //滑入动画: slideDown(毫秒值,回调函数[显示完毕执行什么]);
$("div").slideDown(2000, function () {
alert("动画执行完毕!");
});
}) //滑出动画
$("button:eq(1)").click(function () { //滑出动画:slideUp(毫秒值,回调函数[显示完毕后执行什么]);
$("div").slideUp(2000, function () {
alert("动画执行完毕!");
});
}) $("button:eq(2)").click(function () {
//滑入滑出切换(同样有四种用法)
$("div").slideToggle(1000);
}) })
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div> </body>
</html>

使用场景:

淡入淡出动画

1、淡入动画效果:

 $(selector).fadeIn(speed, callback);

作用:让元素以淡淡的进入视线的方式展示出来。

2、淡出动画效果:

$(selector).fadeOut(1000);

作用:让元素以渐渐消失的方式隐藏起来

3、淡入淡出切换动画效果:

 $(selector).fadeToggle('fast', callback);

作用:通过改变透明度,切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
/*透明度*/
opacity: 0.5;
background-color: red;
}
</style> <script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () { // //淡入动画用法1: fadeIn(); 不加参数
$("div").fadeIn(); // //淡入动画用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通过控制 透明度和display //淡入动画用法3: fadeIn(字符串); slow慢:600ms normal正常:400ms fast快:200ms
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal"); //淡入动画用法4: fadeIn(毫秒值,回调函数[显示完毕执行什么]);
// $("div").fadeIn(5000,function () {
// alert("动画执行完毕!");
// });
}) //滑出动画
$("button:eq(1)").click(function () {
// //滑出动画用法1: fadeOut(); 不加参数
$("div").fadeOut(); // //滑出动画用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通过这个方法实现的:display: none;
// //通过控制 透明度和display //滑出动画用法3: fadeOut(字符串); slow慢:600ms normal正常:400ms fast快:200ms
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal"); //滑出动画用法1: fadeOut(毫秒值,回调函数[显示完毕执行什么]);
// $("div").fadeOut(2000,function () {
// alert("动画执行完毕!");
// });
}) $("button:eq(2)").click(function () {
//滑入滑出切换
//同样有四种用法
$("div").fadeToggle(1000);
}) $("button:eq(3)").click(function () {
//改透明度
//同样有四种用法
$("div").fadeTo(1000, 0.5, function () {
alert(1);
});
})
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div> </body>
</html>

使用场景,这里淡入淡出了;

卷帘门效果;

自定义动画

语法:

 $(selector).animate({params}, speed, callback);

作用:执行一组CSS属性的自定义动画。

  • 第一个参数表示:要执行动画的CSS属性(必选)

  • 第二个参数表示:执行动画时长(可选)

  • 第三个参数表示:动画执行完后,立即执行的回调函数(可选)

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
}; //自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕!");
});
}); })
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>

停止动画

$(selector).stop(true, false);

里面的两个参数,有不同的含义。

第一个参数:

  • true:后续动画不执行。

  • false:后续动画会执行。

第二个参数:

  • true:立即执行完成当前动画。

  • false:立即停止当前动画。

PS:参数如果都不写,默认两个都是false。实际工作中,直接写stop()用的多。

案例:鼠标悬停时,弹出下拉菜单(下拉时带动画)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
} .wrap li {
background-color: green;
} .wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
} .wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
} .wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函数
$(document).ready(function () {
//需求:鼠标放入一级li中,让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li"); //绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
}); //绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script> </head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
<li><a href="javascript:void(0);">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单1</a>
<ul>
<li><a href="javascript:void(0);">三级菜单2</a></li>
<li><a href="javascript:void(0);">三级菜单3</a></li>
<li><a href="javascript:void(0);">三级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

ps:

javascript:void(0); //跟javascript:;效果一样

上方代码中,关键的地方在于,用了stop函数,再执行动画前,先停掉之前的动画。

jquey动画效果的更多相关文章

  1. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  2. Android动画效果之自定义ViewGroup添加布局动画

    前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通 ...

  3. Android动画效果之Property Animation进阶(属性动画)

    前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...

  4. Android动画效果之初识Property Animation(属性动画)

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  5. Android动画效果之Frame Animation(逐帧动画)

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  6. Android动画效果之Tween Animation(补间动画)

    前言: 最近公司项目下个版本迭代里面设计了很多动画效果,在以往的项目中开发中也会经常用到动画,所以在公司下个版本迭代开始之前,抽空总结一下Android动画.今天主要总结Tween Animation ...

  7. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  8. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  9. iOS之按钮出现时加一个动画效果

    //按钮出现时的动画效果 + (void)buttonAnimation:(UIButton *)sender { CAKeyframeAnimation *animation = [CAKeyfra ...

随机推荐

  1. [译]为什么在__new __()后总是调用__init __()?

    原文来源: https://stackoverflow.com/questions/674304/why-is-init-always-called-after-new 需要控制新实例的创建时,请使用 ...

  2. ios label根据内容自适应高度

    label自适应高度,想必大家也都很熟悉怎么去做,上代码: UILabel *label3 = [[UILabel alloc]initWithFrame:CGRectMake(150, 50, 15 ...

  3. OutOfMemoryError异常——Java堆溢出。

    https://blog.csdn.net/en_joker/article/details/79726975 (将堆的最小值-Xms参数与最大值-Xmx参数设置为一样即可避免堆自动扩展),通过参数- ...

  4. 使用 Node.js 写一个代码生成器

    背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操 ...

  5. 四、Spring中使用@Conditional按照条件注册Bean

    以前其实是写过@Condtional注解的笔记的,这里附上链接: Spring中的@conditional注解 但已经忘记的差不多了,所以今天再重新学习下,可以互补着学习 @Contional:按照一 ...

  6. Create C/C++ DLLs in Visual Studio

    https://docs.microsoft.com/zh-tw/cpp/build/dlls-in-visual-cpp?view=vs-2019 Walkthrough: Create and u ...

  7. Linux05 文件或目录的权限(ls、lsattr、chattr、chmod、chown、chgrp、file)

    一.查看文件或目录的权限:ls -al  文件名/目录名 keshengtao@LAPTOP-F9AFU4OK:~$ ls -al total drwxr-xr-x keshengtao keshen ...

  8. IP核——RAM

    一.Quartus 1.打开Quartus ii,点击Tools---MegaWizard Plug-In Manager 2.弹出创建页面,选择Creat a new custom megafunc ...

  9. 从docker中备份oracle和mongo数据

    从docker中导出Oracle数据 这里推荐先把脚本文件放到容器里面(这里没有) #!/bin/sh # 进入容器 # 本机备份位置 /root/oracleData/dist/temp # 当前日 ...

  10. PB对象Event ID说明

    原地址:https://www.cnblogs.com/nickflyrong/p/5973795.html Event ID 含义 内容浅析 event可以用pb自带的id,自动触发事件,而func ...