zoukankan      html  css  js  c++  java
  • Jquery中的效果

    1.加载方法
    $(document).ready()与window.onload()函数的比较
    $(document).ready()是在dom完全就绪时调用,并不意味着所有关联的文件都已经下载
    window.onload()是所有关联的元素都已经下载完毕
    Juery中的onload()方法与window.onload()相同
    2.show():显示隐藏的匹配元素。
    可选参数
    duration一个字符串或者数字决定动画将运行多久。
    callback在动画完成时执行的函数。
    easing一个用来表示使用哪个缓冲函数来过渡的字符串。
    <p style="display: none">Hello</p>
    $("p").show("fast",function(){
       $(this).text("Animation Done!");
     });
    3.hide():以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。
    可选参数
    duration一个字符串或者数字决定动画将运行多久。
    callback在动画完成时执行的函数。
    easing一个用来表示使用哪个缓冲函数来过渡的字符串。
    $("p").hide("fast",function(){
       alert("Animation Done.");
     });
    4.toggle():切换元素的可见状态。
    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
    可选参数
    duration一个字符串或者数字决定动画将运行多久。
    callback在动画完成时执行的函数。
    duration一个字符串或者数字决定动画将运行多久。
    easing一个用来表示使用哪个缓冲函数来过渡的字符串。
    callback在动画完成时执行的函数。
    showOrHide一个布尔值指示是否显示或隐藏的元素。
    $("p").toggle("fast",function(){
         alert("Animation Done.");  
    });
    toggle(switch):根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。
    如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。
    <p>Hello</p><p style="display: none">Hello Again</p>
    var flip = 0;   
    $("button").click(function () {
            $("p").toggle( flip++ % 2 == 0 );   
    });
    5.fadeIn(speed,[callback]):通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
    这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
    fadeOut(speed,[callback]):通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
    $("p").fadeOut("fast",function(){
       alert("Animation Done.");
     });
    fadeTo(speed,opacity,[callback]):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
    可选参数
    duration一个字符串或者数字决定动画将运行多久。
    opacity一个0至1之间表示目标透明度的数字。
    callback在动画完成时执行的函数。
    duration一个字符串或者数字决定动画将运行多久。
    opacity一个0至1之间表示目标透明度的数字。
    easing一个用来表示使用哪个缓冲函数来过渡的字符串
    callback在动画完成时执行的函数。
    $("p").fadeTo("fast", 0.25, function(){
       alert("Animation Done.");
     });
    6.slideDown(speed,[callback]):通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
    slideUp(speed,[callback]):通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
    slideToggle(speed,[callback]):通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
    可接受参数:
    duration一个字符串或者数字决定动画将运行多久。
    callback在动画完成时执行的函数。
    duration一个字符串或者数字决定动画将运行多久。
    easing一个用来表示使用哪个缓冲函数来过渡的字符串。
    callback在动画完成时执行的函数。
    $("p").slideToggle("fast",function(){
       alert("Animation Done.");
     });
    7.animate(params,options):用于创建自定义动画的函数
    可选参数
    params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

    options (Options) : 一组包含动画选项的值的集合。
      选项中可以包括
        duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值
        easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
        complete (Function) : 在动画完成时执行的函数
        step (Callback) :
        queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列
        specialEasing:一组一个或多个通过相应的参数和相对简单函数定义的CSS属性
    例如:
    第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。
    第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.
    <button id="go1">» Animate Block1</button>
    <button id="go2">» Animate Block2</button>
    <div id="block1">Block1</div><div id="block2">Block2</div>
    jQuery 代码:
    $("#go1").click(function(){
      $("#block1").animate( { "90%"}, { queue: false, duration: 5000 } )
         .animate( { fontSize: '10em' } , 1000 )
         .animate( { borderWidth: 5 }, 1000);
    });
    $("#go2").click(function(){
      $("#block2").animate( { "90%"}, 1000 )
         .animate( { fontSize: '10em' } , 1000 )
         .animate( { borderWidth: 5 }, 1000);
    });
    8.stop(stop([clearQueue],[gotoEnd])):停止所有在指定元素上正在运行的动画。
    如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
    // 开始动画
    $("#go").click(function(){
      $(".block").animate({left: '+200px'}, 5000);
    });
    // 当点击按钮后停止动画
    $("#stop").click(function(){
      $(".block").stop();
    });
    9.delay(duration,[queueName]):设置一个延时来推迟执行队列中之后的项目。
    参数
    duration (Integer) :延时时间,单位:毫秒
    queueName (可选) (String) :队列名词,默认是Fx,动画队列。
    示例
    在.slideUp() 和 .fadeIn()之间延时800毫秒。
    <div id="foo">    
    jQuery 代码:
    $('#foo').slideUp(300).delay(800).fadeIn(400);
    10.jQuery.fx.off:关闭页面上所有的动画。
    jQuery.fx.off = true;
    11.jQuery.fx.interval 返回: Number,该动画的频率(以毫秒为单位)。
    这个属性可以被操作,以调整它的动画每秒运行帧数。默认是13毫秒。修改为一个较小的数字可能使动画在更快浏览器(如Chrome)中运行更流畅,但这样做有可能影响性能。

  • 相关阅读:
    PHP中使用cURL实现Get和Post请求的方法
    详解回调函数——以JS为例解读异步、回调和EventLoop
    JavaScript中变量提升------Hoisting
    js 变量提升(JavaScript Scoping and Hoisting)
    js 如何判断数据是数据还是对象
    Bootstrap Modal 垂直方向加滚动条
    Bootstrap Affix(附加导航(Affix)插件的用法)
    Vue 源码解析:深入响应式原理(上)
    ceph API之PHP的S3-SDK包的泛域名解析问题
    ceph API之PHP的客户端连接
  • 原文地址:https://www.cnblogs.com/ldqwyl/p/2029888.html
Copyright © 2011-2022 走看看