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. JS规则 表达出你的想法(表达式) 通常包括常数和变量 var num2 = num1+6;

    表达出你的想法(表达式) 表达式与数学中的定义相似,表达式是指具有一定的值.用操作符把常数和变量连接起来的代数式.一个表达式可以包含常数或变量. 我们先看看下面的JavaScript语句: 生活中&q ...

  2. Python基础知识之2——字典

    字典是什么? 字典是另外一个可变的数据结构,且可存储任意类型对象,比如字符串.数字.列表等.字典是由关键字和值两部分组成,也就是 key 和 value,中间用冒号分隔.这种结构类似于新华字典,字典中 ...

  3. SDOI2018Round1 && 九省联考 爆炸记

    Day 0 做了一上午火车,大概中午十二点左右到了烟台核电培训中心宾馆,宾馆蛮不错的,跟我在北京参加英才论坛时住的宾馆舒适程度上差不多. 下午花式颓颓颓,吃了晚饭(体验一般)去试机,听说用Lemon评 ...

  4. 【珍惜时间】vuepro

    老规矩放上大大的github开源地址:https://github.com/goodheart222/vuepro 我们再来看看项目的效果,初步根据效果做到心中有数 看到效果的话,我们会发现,肯定是有 ...

  5. js把时间转化为 ‘2019-07-01’ 格式

    将new Date()数据转化为‘2019-07-01’格式 //时间 function formatDate(date) { var y = date.getFullYear(); ; m = m ...

  6. HTML - head标签相关

    <html> <!-- head标签中主要配置浏览器的配置信息 --> <head> <!-- 网页标题标签, 用来指定网页的标题 --> <ti ...

  7. 8年前诞生于淘宝，细数阿里云RPA 的前世今生！

    9月10日,踏入55岁的马云正式卸任阿里巴巴董事局主席一职,由阿里巴巴集团CEO张勇接任.公寓创业.西湖论剑.美国敲钟,从成立到登顶中国最值钱的公司,阿里巴巴只用了20年. 阿里云RPA,2011年诞 ...

  8. 边缘节点服务ENS重磅升级 阿里云首次定义“边缘云计算”概念层层深入

    随着5G.物联网时代的到来以及云计算应用的逐渐增加,传统集中式的云计算技术已经无法满足终端侧“大连接,低时延,大带宽”的需求.结合边缘计算的概念,云计算将必然发展到下一个技术阶段,也就是将云计算的能力 ...

  9. day07 linux磁盘分区，ps，kill，df，top命令使用

    day07进入单用户模式删除密码不能进入系统问题: SELINUX=disabled 操作系统linux开机流程加电BIOS找到启动介质先读取第一个扇区(MBR)grup找到kernel加载到内存执行 ...

  10. ssoj 2279 磁力阵

    说不想改最后还是向T1屈服了..然后就de了一下午Bug... 虽然昨天随口扯的有点道理,正解就是迭代加深A星搜索,但实际写起来就十分难受了. 说自己的做法,略鬼畜. 每个正方形的边界上的边.每条边在 ...