zoukankan      html  css  js  c++  java
  • jQuery UI效果函数演示

    最近在看jQuery UI的库,以前没怎么系统学过jQuery UI库函数的效果,JS说到底是一门函数式编程语言,靠一点点的搭建来完成整个框架,现将效果函数的用法列表如下,具体的实现可以去看库函数。

    .addClass()

    当动画样式改变时,为匹配的元素集合内的每个元素添加指定的Class。

    $("div").click(function(){
        $(this).addClass("big-blue",1000,"easeOutBounce");
    });

    Blind Effect

    百叶窗特效通过将元素包裹在一个容器内,采用“拉百叶窗”效果来隐藏或显示元素

    $(document).click(function(){
       $("#toggle").toggle("blind");
    });

    Bounce Effect

    反弹特效,反弹一个元素。当与隐藏或显示一起使用时,最后一次或第一次反弹会呈现淡入/淡出的效果

    $(document).click(function(){
        $("#toggle").toggle("bounce",{time:3},"slow");
       })

    Clip Effect

    剪辑效果通过垂直或水平剪辑一个元素来显示或隐藏它,并且它是从元素的两端同时进行的。

     $(document).click(function(){
        $("#toggle").toggle("clip");
       })

    Color Animation

    颜色动画使用.animate()

    $("#toggle").click(function(){
       $("#elem").animate({
           color:"green",
           backgroundColor:"rgb(20,20,20)"
       });
    });

    Drop Effect

    拉拽特效隐藏或显示一个元素,并使用通过淡入或淡出效果使它向一个方向滑动。

    $(document).click(function(){
       $("#toggle").toggle("drop");
    });

    easings

    动画缓冲函数可以确定在动画过程中不同时刻的动画速度。

    Explode Effect

    爆炸特效通过将元素分拆成若干片来隐藏或显示一个元素

      $(document).click(function(){
        $("#toggle").toggle("explode");
       })

    Fade Effect

    淡入淡出的隐藏式或显示一个元素

    $( document ).click(function() {
      $( "#toggle" ).toggle( "fade" );
    });

    Fold Effect

    通过折叠形式来隐藏或显示一个元素

    $( document ).click(function() {
      $( "#toggle" ).toggle( "fold" );
    });
  • 相关阅读:
    【转】Quartz企业作业调度配置参考
    [转]quartz中参数misfireThreshold的详解
    【转】MFC下拉框使用方法
    MFC中使用tinyxml
    【转】MYSQL中复制表结构的几种方法
    C++错误:重定义 不同的存储类
    【转】vbsedit提示“无法创建空文档”解决办法
    wordbreak和wordwrap
    css字体font
    js和jquery书籍
  • 原文地址:https://www.cnblogs.com/chaoquan/p/7778814.html
Copyright © 2011-2022 走看看