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. CSS选择器及优先级

    转自CSS优先级的计算公式:http://wyz.67ge.com/css-selector-priority/ 通常我们可以将CSS的优先级由高到低分为六组: 无条件优先的属性只需要在属性后面使用 ...

  2. 深入理解Java虚拟机（程序编译与代码优化）

    文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...

  3. csscomb配置文件说明

    { "always-semicolon": true, // 总是显示分号 "block-indent": " ", // 代码块缩进,可以 ...

  4. [JZOJ4649] 【NOIP2016提高A组模拟7.17】项链

    题目 描述 题目大意 给你一堆小串,每个小串都有一定的分数. 让你构造一个字符串,若子串中出现了之前的小串,就可以得到对应的分数(可以重复) 问最大分数. 思考历程 一看这题就知道是什么字符串方面的算 ...

  5. 2016.9.10初中部上午NOIP普及组比赛总结

    2016.9.10初中部上午NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1340 好不爽!翻车了!不过排名差不多在中间偏上一点, 还好不是 ...

  6. JS的高阶函数

    JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. 这就是最简单的高阶函数啦 functio ...

  7. hdu 4563

    hdu 4563 把每个命令走的距离抽象成完全背包 枚举最后一个不是整点走完的命令 #include <iostream> #include <algorithm> #incl ...

  8. Java-MyBatis-MyBatis3-XML映射文件：XML映射文件

    ylbtech-Java-MyBatis-MyBatis3-XML映射文件:XML映射文件 1. XML 映射文件 MyBatis 的真正强大在于它的映射语句,这是它的魔力所在.由于它的异常强大,映射 ...

  9. 一个WEB网站高并发量的解决方案

    一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...

  10. 解决Couldn't resolve host 'mirrorlist.centos.org

    这个错误引起主要是因为环境读取不到yun引起的可以考虑/etc/sysconfig/network-scripts/ifcfg-eth0 配置出错导致网络不通.或者/etc/resolv.conf的D ...