zoukankan      html  css  js  c++  java
  • jquery中的动画

    jQuery动画

    1.左上角的缩放效果

    hide([speed,[fn]])

      概述:隐藏显示的元素

      参数:speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示 动画时长的毫秒数值(如:1000)

          fn:在动画完成时执行的函数,每个元素执行一次。

    // $(":button[value=隐藏]").click(function(){
    // $("div").hide(2000,function(){
    // alert("div隐藏了");
    // });
    // })

    show([speed,[fn]])

      概述:显示隐藏的匹配元素。

    // $(":button[value=显示]").click(function(){
    // $("div").show(2000,function(){
    // alert("div显示了");
    // });
    // })

    toggle([speed],[fn])

      概述:如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

     // //toggle([speed],[fn]) 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的
    // $(":button[value=隐显]").click(function(){
    // $("div").toggle(2000);
    // })

    2.上下的缩放效果 

    slideUp(speed, [callback])

      概述:通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

      参数: speed 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) callback (可选) 在动画完成时执行的函数

    //slideUp(speed, [fn]) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数
    // $(":button[value=隐藏]").click(function(){
    // $("div").slideUp(2000);
    // })

    slideDown(speed, [callback])

      概述:通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

    // //slideDown(speed, [fn]) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数
    // $(":button[value=显示]").click(function(){
    // $("div").slideDown(2000);
    // })

    slideToggle([speed],[fn])
      概述:通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

    //slideToggle([speed],[fn]) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数
    // $(":button[value=隐显]").click(function(){
    // $("div").slideToggle(2000);
    // })

    3.淡入淡出效果(不透明度的变化) 

    fadeOut(speed, [callback])

      概述:通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

    // $(":button[value=隐藏]").click(function(){
    // $("div").fadeOut(2000);
    // })

    fadeIn(speed, [callback])

      概述:通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

    $(":button[value=显示]").click(function(){
    // $("div").fadeIn(2000);
    // })

    fadeToggle([speed,[fn]])

      概述:通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

    $(":button[value=隐显]").click(function(){
    // $("div").fadeToggle(2000);
    // })

    fadeTo(speed,opacity,[fn])

      概述:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

    // $(":button[value=隐藏]").click(function(){
    // $("div").fadeTo(2000,0.5);
    // })

    4.自定义动画

    animate(params,[speed],[fn])

      概述:用于创建自定义动画的函数。

    //          $("div").animate({"left":"1000px"},2000);

    stop([clearQueue], [gotoEnd])

      概述:停止所有在指定元素上正在运行的动画。

      参数: clearQueue (可选)如果设置成true,则清空队列。可以立即结束动画。

                   gotoEnd (可选)让当前正在执行的动画立即完成。

    // $(document).click(function(){
    // $("div").stop()
    // })

    delay(duration)

      概述:设置一个延时来推迟执行队列中之后的项目。

      参数 duration 延时时间,单位:毫秒

    //          $("div").delay(2000).animate({"left":"1000px"},2000);

  • 相关阅读:
    MySQL手册
    字符串置换
    Java实现三角形计数
    Java实现求二叉树的路径和
    Excel催化剂开源第46波-按行列排列多个图形技术要点
    Excel催化剂开源第44波-窗体在Show模式下受Excel操作影响变为最小化解决方式
    Excel催化剂开源第45波-按原图大小导出图片
    个人永久性免费-Excel催化剂功能第105波-批量调整不规范的图形对象到单一单元格内存储
    Excel催化剂开源第42波-与金融大数据TuShare对接实现零门槛零代码获取数据
    Excel催化剂开源第43波-Excel选择对象Selection在.Net开发中的使用
  • 原文地址:https://www.cnblogs.com/Coding--Peasant/p/6999233.html
Copyright © 2011-2022 走看看