zoukankan      html  css  js  c++  java
  • jQuery学习之基本效果

    1> show() 显示隐藏的匹配元素

    这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
    示例

    //显示所有段落
    HTML 代码:
    <p style="display: none" mce_style="display: none">Hello</p>
    jQuery 代码:
    $("p").show()
    

    2> hide() 隐藏显示的元素
    这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。
    示例

    //隐藏所有段落
    jQuery 代码:
    $("p").hide()
    

    3> hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数

    可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。
    参数
    speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    callback (Function) : (可选) 在动画完成时执行的函数,每个元素执行一次。
    示例

    4> toggle() 切换元素的可见状态
    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
    示例

    //切换所有段落的可见状态。
    HTML 代码:
    <p>Hello</p><p style="display: none" mce_style="display: none">Hello Again</p>
    jQuery 代码:
    $("p").toggle()
    结果:
    <p tyle="display: none">Hello</p><p style="display: block" mce_style="display: block">Hello Again</p>
    

    5> toggle( switch ) 根据switch参数切换元素的可见状态(ture为可见,false为隐藏)
    如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。
    示例

    //切换所有段落的可见状态。
    HTML 代码:
    <p>Hello</p><p style="display: none" mce_style="display: none">Hello Again</p>
    jQuery 代码:
      var flip = 0;
      $("button").click(function () {
          $("p").toggle( flip++ % 2 == 0 );
      });
    结果:
    <p tyle="display: none">Hello</p><p style="display: block" mce_style="display: block">Hello Again</p>
    

    6> toggle(speed,[callback]) 以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数
    可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。
    参数

    speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    callback (Function) : (可选) 在动画完成时执行的函数,每个元素执行一次。
    示例

    //用600毫秒的时间将段落缓慢的切换显示状态
    jQuery 代码:
    $("p").toggle("slow");
    用200毫秒将段落迅速切换显示状态,之后弹出一个对话框。
    jQuery 代码:
    $("p").toggle("fast",function(){
       alert("Animation Done.");
     });
    
    
  • 相关阅读:
    PAT-字符串处理-A 1001 A+B Format (20分)
    PAT-字符串处理-B 1048 数字加密 (20分)
    数据库-第二章 关系数据库-2.3 关系的完整性
    数据库-第二章 关系数据库-2.2 关系操作
    数据库-第二章 关系数据库-2.1 关系数据结构及形式化定义
    IDLE打开Python报错 api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案
    老毛桃pe安装系统
    LeetCode 213. House Robber II (动态规划)
    LeetCode 198. House Robber(DP)
    LeetCode 211. Add and Search Word
  • 原文地址:https://www.cnblogs.com/intcry/p/2014532.html
Copyright © 2011-2022 走看看