zoukankan      html  css  js  c++  java
  • JQuery UI 特效

    使用的特效的函数:

    隐藏元素 hide();

    显示元素 show();

    隐藏/显示元素 toggle();

    元素使用特效 effect();

    改变样式

    toggleClass();

    removeClass();

    addClass();

    语法

    写法一: .toggle( effect [, options ] [, duration ] [, complete ] )

    写法二: .toggle( options )

    参数:effect [String]

    blind(百叶窗),bounce(弹跳),drop(拖动),slide(滑动)

    explode(爆炸特效),fade(淡入淡出),fold(折叠),highlight(高亮),

    puff(膨胀),scale(缩放),pulsate(闪动),shake(震动)

    同样的,

    options [object]

    这个object里面使用key:value键值对方式

    {effect:“”,easing:“” duration:time, complete:callback ,queue:true/false }

     easing缓动效果,跟随变化曲线二变化的特效

    下面举个例子。。

    ========================================

     (粗体表示该效果独有的属性,带/的表示可能的取值,第一个为默认值)

    百叶窗特效:blind 

    写法1:$( "#toggle" ).toggle( "blind" ,2000);

    写法2:$( "#toggle" ).toggle({effect:"blind",duration:2000,direction:"up/down/left/right/vertical/horizontal"});

    反弹特效:bounce

    写法1:$( "#toggle" ).toggle( "bounce", { times: 3 }, "slow" );  类似这个特有的属性就作为一个options来作为参数

    写法2:$( "#toggle" ).toggle( {effect:"bounce",distance:50, times: 10 }, "2500" );

    写法3:$( "#toggle" ).toggle( {effect:"bounce",distance:50, times: 10 ,duration:2500} );

    剪辑特效:clip

    $( "#toggle" ).toggle( "clip" );

    $( "#toggle" ).toggle( {effect:"clip",direction:"vertical/horizontal" );

    。。。。。。其他的就不列举啦

  • 相关阅读:
    Memcached 分布式缓存系统部署与调试
    nginx_笔记分享_php-fpm详解
    nginx_笔记分享_配置篇
    linux定时任务crond那些事!
    命令passwd报错因inode节点处理记录
    linux下定时任务
    linux内核堆栈
    c语言之单链表的创建及排序
    c语言常见的几种排序方法总结
    Tiny4412之外部中断
  • 原文地址:https://www.cnblogs.com/act262/p/4060980.html
Copyright © 2011-2022 走看看