1、隐藏与显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(document).ready(function(){

            $("#hide").click(function(){

                $("p").hide(1000);/*慢慢隐藏*/

            });

            $("#show").click(function(){

                $("p").show(1000);/*慢慢显示*/

            });

            $("#btn3").click(function(){

                $("p").toggle(1000);/*一个按钮实现隐藏和显示*/

            });

        });

    </script>

</head>

<body>

<p>p元素</p>

<button id="hide">删除</button>

<button id="show">显示</button>

<button id="btn3">隐藏/显示</button>

</body>

</html>
<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>hide demo</title>

    <style>

        div {

            background: #ece023;

            width: 30px;

            height: 40px;

            margin: 2px;

            float: left;

        }

    </style>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

<div></div>

<script>

    for ( var i = 0; i < 5; i++ ) {

        $( "<div>" ).appendTo( document.body );

    }

    $( "div" ).click(function() {

        $( this ).hide( 2000, function() {

            $( this ).remove();/*这条语句是在动画执行完成之后再执行的，

                                否则在外面就是意思就是直接删除，就会看不到动画效果了*/

        });

    });

</script>

</body>

</html>

2、淡入淡出

fadeIn()

fadeOut()

fadeTo()

fadeToggle()

3、滑动

slideDown()

slideToggle()

slideUp()

4、回调

回调函数，看jquery官方文档介绍是在动画执行完成之后执行该回调函数。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(document).ready(function(){

            $("#button").click(function () {

                /*p元素先改变css样式，然后再向上滑动1秒，再向下滑动1秒*/

                $("p").css("color", "red").slideUp(1000).slideDown(1000);

            });

        });

    </script>

</head>

<body>

<p>这里是p元素</p>

<button id="button">点击按钮</button>

</body>

</html>

前端（jQuery）（4）-- jQuery隐藏显示与淡入淡出、滑动、回调的更多相关文章

  1. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  2. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

  3. Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. jQuery效果之隐藏与显示、淡入淡出、滑动、回调

    隐藏与显示 淡入淡出 滑动效果

  5. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  6. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  7. jQuery实现图片伦播效果(淡入淡出+左右切换)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

  9. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

随机推荐

  1. html--浮动高度塌陷问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 异常处理记录: Unable to compile class for JSP

    出错信息截图: 经过搜索引擎的帮助, 发现这些引发异常的可能原因: 1. tomcat的版本必须大于等于JDK的版本 2. maven中的jar与tomcat中jar冲突 看看pom.xml, 果然j ...

  3. [JZOJ3171] 【GDOI2013模拟4】重心

    题目 描述 题目大意 有一堆长为222的矩形,最下面的右端点横坐标为000. 每个矩形都有其固定的质量. 将这些矩形堆在一起,使得最右边的横坐标最大,并且满足它不会塌掉(满足物理学). 思考历程 首先 ...

  4. koa2 安装环境

    1.安装koa2 npm install koa@2 -g 2.创建项目 (1)安装koa2生成器 npm install koa-generator -g (2)koa2生成一个test项目 koa ...

  5. 反编译之jadx工具

    1.jadx是个开源 https://github.com/skylot/jadx 2.下载后cd到文件的根目录 然后输入命令 ./gradlew dist 之后会出现build文件进入/build/ ...

  6. L2-006 树的遍历 （层序遍历）

    根据访问根节点与左右子树的先后顺序,二叉树一般有三种遍历方式:先序遍历.中序遍历和后序遍历. 只要给定中序遍历序列与先序或后序中的一种,可以还原二叉树结构.学习数据结构课程时,一直都只会手动构建还原二 ...

  7. Cesium官方教程7--三维模型

    原文地址:https://cesiumjs.org/tutorials/3D-Models-Tutorial/ 三维模型 (3D Models) 这篇教程给大家介绍,如何在Cesium中通过Primi ...

  8. Mysql千万级数据性能调优配置

    背景: 笔者的源数据一张表大概7000多万条,数据大小36G,索引6G,加起来表空间有40G+,类似的表有4张,总计2亿多条 数据库mysql,引擎为innodb,版本5.7,服务器内存256G,物理 ...

  9. 用this 对方法的扩展

    *都是静态方法 this指向的是调用的object*

  10. C#计算两个时间的时间差，精确到年月日时分秒

    喏,计算两个时间的时间差,精确到年月日时分秒 看起来比较笨的方法了,不知道有没有改进 DateTime d1 = new DateTime(2016, 4, 1, 0, 0, 0); DateTime ...