1.显示，隐藏：

<!DOCTYPE html>

<html>

<head>

    <title>jquery事件</title>

</head>

<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>

<script type="text/javascript">

    $(document).ready(function(){

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

          $('#p1').hide();

      });

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

          $('#p1').show();

      });

    });

</script>

<body>

<p id="p1">看看我显示还是隐藏</p>

<button id="hide">隐藏</button>

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

</body>

</html>

toggle()切换显示，隐藏：

<!DOCTYPE html>

<html>

<head>

    <title>jquery事件</title>

</head>

<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>

<script type="text/javascript">

    $(document).ready(function(){

      $('button').click(function() {

          $('#p1').toggle();

      });

    });

</script>

<body>

<p id="p1">看看我显示还是隐藏</p>

<button id="hide">隐藏</button>

</body>

</html>

2.淡入淡出：

<script type="text/javascript">

    $(document).ready(function(){

      $('button').click(function() {

          $('#p1').toggle();

          $('#p1').fadeIn();  // 淡入已隐藏的元素

          $('#p1').fadeOut();  // 淡出可见元素

          $('#p1').fadeToggle();  // 在 fadeIn() 与 fadeOut() 方法之间进行切换

          $("#p1").fadeTo("slow",0.15); // 允许渐变为给定的不透明度（值介于 0 与 1 之间

      });

    });

</script>

3.滑动：

<!DOCTYPE html>

<html>

<head>

    <title>jquery事件</title>

    <style type="text/css">

        #panel,#flip

        {

            padding:5px;

            text-align:center;

            background-color:#e5eecc;

            border:solid 1px #c3c3c3;

        }

        #panel

        {

            padding:50px;

            display:none;

        }

    </style>

</head>

<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>

<script type="text/javascript">

    $(document).ready(function(){

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

         $("#panel").slideToggle("slow");

         $("#panel").slideDown("slow");

         $("#panel").slideUp("slow");

      });

    });

</script>

<body>

<div id="flip">点我，显示或隐藏面板。</div>

<div id="panel">Hello world!</div>

</body>

</html>

4.动画：

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

  $("div").animate({

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

  });

});

5.停止动画：

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

  $("#panel").stop();

});

6.Callback:

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

  $("p").hide("slow",function(){

    alert("段落现在被隐藏了");

  });

});

7.链：

$("#p1").css("color","red")

  .slideUp()

  .slideDown();

jQuery学习四——效果的更多相关文章

  1. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

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

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

  3. jquery 学习(四) - 标签 添加/删除/修改

    HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...

  4. JQuery学习四（过滤选择器）

    :first选择第一个元素.$(“div:first”)进行选择第一个<div> :last 选择最后一个最后一个元素 $("div:last")选取最后一个<d ...

  5. jquery学习笔记(四)：动画

    内容来自[汇智网]jquery学习课程 4.1 显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).h ...

  6. 第二十四篇 jQuery 学习6 删除元素

    jQuery 学习6 删除元素   上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...

  7. 第二十一篇 jQuery 学习3 特效效果

    jQuery 学习3   这节课主要是学习jQuery的动态效果. show()和hide()显示与隐藏方法,toggle()方法,fadeIn()谈入,fadeOut()谈出,slideDown() ...

  8. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  9. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. flask中使用ajax 处理前端请求，结果展示在同一页面，不点击页面不展示

    在同一页面点击按钮,后端处理后展示在同一页面,不点击隐藏该结果:与上一篇大同小异,需要在 html.flask.js微调 效果展示: (未点击查询) (点击查询) html: <html> ...

  2. Pycharm----【Mac】设置默认模板

    使用场景:新建的文件中,有某些字段或者代码段是每次都需要写入的,因此为了编写的方便,我们会创建对应的模板,每次新建选择模板即可. 操作步骤如下: pycharm--->preference--- ...

  3. kafka读书笔记《kafka并不难学》

    ======第一章 1 在高并发场景,如大量插入.更新数据库会导致锁表,导致连接数过多的异常,此时需要消息队列来缓冲一下.消息队列通过异步处理请求来缓解压力 2 消息队列采用异步通信机制消息队列拥有先 ...

  4. clean()方法的简单应用

    clean()方法主要用于验证相互依赖的字段,例如注册时,填写的“密码”和“确认密码”要相等时才符合要求. 在调用表单clean() 方法的时候,所有字段的验证方法已经执行完(表单字段的默认验证(如C ...

  5. CF436E Cardboard Box（贪心）

    题意 有nnn个关卡,第iii关可以花费aia_iai​的代价打一颗星,bib_ibi​的代价打两颗星.保证1≤ai<bi≤1091\le a_i<b_i\le10^91≤ai​<b ...

  6. Java 重要知识点，踩过的坑

    (1),关于 LinkedHashMap  TreeMap HashMap 之间的区别: HashMap 是无序的,LinkedHashMap 由于内部维护了一个记录的链表,数据操作的前后顺序都会在链 ...

  7. dubbo-本地直连

    一.背景 目前项目是基于dubbo做为rpc,zk为注册中心实现多个微服务之间的远程服务调用.但需要本地联调dubbo接口时,需要绕过注册中心,达到不干扰线上服务,即只订阅不注册服务的目的. 二.实现 ...

  8. Oracle 修改SID --不建议修改

    1.登录数据库查看SID select instance_name,status from v$instance; 2.关闭数据库 shutdown immdiate; 3.修改/etc/oratab ...

  9. margin:auto你真的理解么

    含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...

  10. (WAWAWAWAWAWA) BZOJ 1858: [Scoi2010]序列操作

    二次联通门 : BZOJ 1858: [Scoi2010]序列操作 /* BZOJ 1858: [Scoi2010]序列操作 已经... 没有什么好怕的的了... 16K的代码... 调个MMP啊.. ...