• jquery 效果


    效果
    1.基本效果
        1.1 show([speed,[easing],[fn]]) 如果元素本身是可见的,则不对其作任何改变。如果元素是隐藏的,则使其可见。
            $("p").show("slow","linear",function(){alert("显示完全")});
            $("p").show(1000,"swing",function(){alert("显示")})
        1.2 hide([speed,[easing],[fn]]) 如果元素本身是不可见的,则不对其作任何改变。如果元素是可见的,则将其隐藏。
            $("p").hide("slow","linear",function(){alert("隐藏")});
            $("p").hide(1000,"swing",function(){alert("隐藏")});
        1.3 toggle([speed],[easing],[fn]) 如果元素当前是可见的,则将其隐藏;如果元素当前是隐藏的,则使其显示
            $("p").toggle(true); 显示元素
            $("p").toggle(false); 隐藏元素
            $("p").toggle(1000,function(){alert("转换完毕")});
    2.滑动效果
        2.1 slideDown([speed],[easing],[fn]) 元素可见区域的高度从0逐渐增大到其原有高度(向下逐渐展开)。
            $("p").slideDown(1000,function(){alert("显示")});
        2.2 slideUp([speed],[easing],[fn]) 元素可见区域的高度从原有高度逐渐减小到0(向上逐渐收起)
            $("p").slideUp(1000,function(){alert("隐藏")});
        2.3 slideToggle([speed],[easing],[fn]) 如果元素当前是可见的,则将其隐藏(向上滑动);如果元素当前是隐藏的,则使其显示(向下滑动)。
            $("p").slideToggle(1000,function(){alert("切换")});
    3.淡入淡出效果
        3.1 fadeIn([speed],[easing],[fn]) 元素的不透明度的比例从0%逐渐增加到100%。
            $("p") .fadeIn(1000,function(){alert("显示")});
        3.2 fadeOut([speed],[easing],[fn]) 元素的不透明度的比例从100%逐渐减小到0%。
            $("p").fadeOut("slow");
        3.3 fadeTo([[speed],opacity,[easing],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
            $("p").fadeTo("fast",0.8);
            $("p").fadeTo(2000,0.5,function(){alert("显示到一定的透明度")});
        3.4 fadeToggle([speed,[easing],[fn]]) 如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。
            $("p").fadeToggle(1000,function(){alert("切换")});
    4.自定义动画
        4.1 animate(params,[speed],[easing],[fn]) 执行一个基于css属性的自定义动画。你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画。
            color、background-color无法用于动画(除非使用jQuery.Color()插件)
            css属性值也可以是相对的,你可以为属性值加上前缀"+="或"-=",以便于在原来的属性值上增加或减少指定的数值。
            所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
            $("p").animate({height:"
    +=100px",marginLeft:"300px"},2000);    $("p").animate({height:'toggle',opacity:0.9},1000,function(){alert("自定义动画")});
        4.2 stop() 停止当前匹配元素上正在运行的动画。
            $("p").stop(); 停止当前动画,不清空队列
            $("p").stop(true); 停止当前动画,清空队列(停止全部)
        4.3 delay(time) 队列中等待执行的下一个动画延迟指定的时间后才执行
            $myDiv.fadeOut( "slow" )
            .delay( 2000 )
            .slideDown( 1000 )
            执行完fadeOut()后,等待2s,执行slideDown()
        4.4 finish() 用于立即完成队列中的所有动画。finish()会停止当前正在运行的动画,删除所有队列中的动画,并完成匹配元素的所有动画。
            .finish()方法和.stop(true, true)很相似,.stop(true, true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
            $("p").finish();
    5.设置
        5.1 jquery.fx.off 属性用于设置或返回是否全局性地禁用所有动画。如果将该属性设为true,将全局性地禁用所有动画。所有正在执行的动画队列不会受到影响。尚未执行的任何动画队列都会在执行时立即完成,而不再带有动画效果。
            if( $.fx.off ){
                jQuery.fx.off = false; // 启用动画效果
                this.value = "禁用动画效果";
            }else{
                $.fx.off = true; // 禁用动画效果
                this.value = "启用动画效果";
            }
        5.2 jQuery.fx.interval 属性用于设置或返回动画的帧速(毫秒值)。jQuery.fx.interval属性用于设置jQuery动画每隔多少毫秒绘制一帧图像(触发一次样式更 改,浏览器可能会重新绘制当前页面)。该值越小,则动画的触发次数越多,动画效果也更明显、更平滑,当然也就越耗费性能。
    更改该属性值时,正在执行的动画队列将不受影响。尚未执行的任何动画队列都将按照更改后的帧速来绘制动画效果。
            // 更改帧速
            $("select").change( function(){
                $.fx.interval = this.value; // 设置帧速
            } );

  • 相关阅读:
    【译】x86程序员手册30-8.2 I/O指令
    【译】x86程序员手册29-第8章 输入输出
    【译】x86程序员手册28-7.7任务地址空间
    【译】x86程序员手册27-7.6任务链
    【译】x86程序员手册26-7.5任务切换
    【译】x86程序员手册25-7.1任务状态段
    【译】x86程序员手册23-6.5组合页与段保护
    【译】x86程序员手册24-第7章 多任务
    【译】x86程序员手册22-6.4页级保护
    WPF Blend Grid 布局
  • 原文地址:https://www.cnblogs.com/qianyouluo/p/5029523.html
Copyright © 2020-2023  润新知