• 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.");
     });
    
    
  • 相关阅读:
    7. 输油管道问题
    6. 循环赛日程表
    4.JSP内置对象
    3.JSP
    2.CSS
    1.HTML
    5. 逆序对数
    [转]Android View.onMeasure方法的理解
    [转]android:clipToPadding和android:clipChildren
    [转]倍数提高工作效率的 Android Studio 奇技
  • 原文地址:https://www.cnblogs.com/intcry/p/2014532.html
Copyright © 2020-2023  润新知