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. Leetcode148. Sort List排序链表

    在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示例 2: 输入 ...

  2. css3 html5 手机设备 列表的弹回和加速移动

    <style type="text/css"> * { margin: 0; padding: 0; } .min { width: 350px; height: 40 ...

  3. leetcode-142-环形链表②

    题目描述: 方法一:O(n) O(n) # Definition for singly-linked list. # class ListNode(object): # def __init__(se ...

  4. CycloneII lcell_comb 和 lcell_FF 的结构

    1,lcell_comb结构 2,lcell_FF结构 from : cycloneii_eda_fd.pdf

  5. duilib教程之duilib入门简明教程2.VS环境配置

    既然是入门教程,那当然得基础点,因为搜索duilib相关资料时,发现有些小伙伴到处都是编译错误,以及路径配置错误等等,还有人不知道SVN,然后一个个文件手动下载的.    其实吧,duilib的定位好 ...

  6. 莫烦PyTorch学习笔记(五)——模型的存取

    import torch from torch.autograd import Variable import matplotlib.pyplot as plt torch.manual_seed() ...

  7. Bitcoin 的基本原理

    昨天读到了 Bitcoin 的中文介绍,觉得非常有意思.不过上面这篇文章解释的非常不靠谱,我花了一晚上去Bitcoin的官方网站 仔细研究了一下,总算理解了其原理.感觉非常有启发,尤其是对虚拟货币的流 ...

  8. opencv-阈值分割

    关于自适应阈值,可参考:Wellner 自适应阈值二值化算法 一.大津法OTSU(最大类间方差法) 参考:非黑即白——图像分割入门篇之Otsu阈值 自适应阈值分割—大津法(OTSU算法)C++实现 灰 ...

  9. LINK : fatal error LNK1104: 无法打开文件“ucrtd.lib”

    先说解决方案: 选中项目->右键->属性->常规 -->Windows SDK     改成当前系统的SDK版本,我这边是10.0.15063.0,重新生成即可 下载cefsh ...

  10. elasticsearch配置优化

    调整ES内存分配有多种方式,建议调整 elasticsearch 中的设置(还可以直接修改bin下的启动脚本). # Directory where the Elasticsearch binary ...