jQuery中toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法。
例如:

  • 改变样式display为none
  • 设置位置高度为0
  • 设置透明度为0

都能达到这个目的,并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外,还引入了toggle、sildeToggle以及fadeToggle切换方法

toggle、sildeToggle以及fadeToggle的区别:
  • toggle:切换显示与隐藏效果
  • sildeToggle:切换上下拉卷滚效果
  • fadeToggle:切换淡入淡出效果
当然细节上还是有更多的不同点:

toggle与slideToggle细节区别:

  • toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性
  • slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

  • fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

  • 元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。

  • 元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。

  • 注释:隐藏的元素不会被完全显示(不再影响页面的布局)

  <h2>toggle与slideToggle以及fadeToggle的比较</h2>
    <p>测试文字淡入效果</p>
    <p>专注分享</p>
    动画切换:
    <select id="animation">
        <option value="1">toggle</option>
        <option value="2">slideToggle</option>
        <option value="3">fadeToggle</option>
    </select>
    <input id="btnShow" type="button" value="点击切换" />
    <script type="text/javascript">

$("#btnShow").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").toggle();
        } else if (v == "2") {
            $("p").slideToggle("slow");
        } else if (v == "3") {
            $("p").fadeToggle(1000, "linear");
        }
    });
    </script>

 

jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)的更多相关文章

  1. jQuery-4.动画篇---动画基础隐藏和显示

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  2. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...

  3. jQuery中toggle与slideToggle以及fadeToggle之间的不同

    toggle()方法: 定义和用法 切换元素的可见状态.如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法: $(selector).toggle(speed,callback ...

  4. jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  5. jquery基础学习之动画篇(四)

    一,动画效果 hide() show() 隐藏与显示 hide(options) 隐藏 对应display:none,有参数就会变成动画, $(document).click(function () ...

  6. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 强大的JQuery(二)--动画效果

    上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...

  8. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  9. 第4章 jQuery的事件和动画(二)

    二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...

随机推荐

  1. 在.net core web项目中生成二维码

    1.添加QRCoder包引用 2. public IActionResult MakeQrCode()        { string url="https://www.baidu.com& ...

  2. YOLT:将YOLO用于卫星图像目标检测

    之前作者用滑动窗口和HOG来进行船体监测,在开放水域和港湾取得了不错的成绩,但是对于不一致的复杂背景,这个方法的性能会下降.为了解决这个缺点,作者使用YOLO作为物体检测的流水线,这个方法相比于HOG ...

  3. Spring官方文档下载

    Spring框架是目前最流行的java web开发框架,很多时候,我们需要去查看spring的官方文档,这里就简单介绍下如何下载其官方文档. 1.搜索到spring 官网并进入 2.点击DOCS 3. ...

  4. C#调用java包里的方法

    用IKVM,步骤: 下载ikvmbin-7.2.4630.5.zip,解压,把bin目录所在路径加到环境变量path里 2.电脑开始->CMD,输入ikvmc –out:”输出dll文件的路径” ...

  5. css--nth-child的注意点

    nth-child( n ) 里面的n可以是任何整数值. 不过要取第一位开始的元素DOM对象,那么n是从1开始的 如果n值小于0或者等于0,是不会匹配任何元素,(或者超过数量)切记切记!!!! 例子: ...

  6. JAVA实现简单的四则运算

    GitHub 项目地址 https://github.com/745421831/-/tree/master PSP PSP2.1 Personal Software Process Stages 预 ...

  7. SQL循环表里的数据

    select * into #t1 from Userinfodeclare @id varchar(2000);while (exists(select ProjectID from #t1))be ...

  8. openssl 检测链路完整

    D:\openssl\bin>openssl s_client -connect www.xxxx.com:443

  9. css 技巧 (持续更新)

    1.滚动条样式   /*自定义滚动条-----隐藏型*/ .scroll::-webkit-scrollbar-track{ border-radius: 1px;   }   .scroll::-w ...

  10. Windows浏览器无法连接VM虚拟机Centos并打开nginx页面

    装的是centos6.7minimal版本,搜了下,需要关闭防火墙 于是 yum install iptables 然后关闭防火墙 service iptables stop 再打开浏览器,成功进入页 ...