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);

  • 相关阅读:
    数据表格
    数据表格
    数据表格
    布局
    表单
    表单
    Java知识点梳理——继承
    Java知识点梳理——抽象类和接口
    面试心得与总结—BAT、网易、蘑菇街
    Java知识点梳理——多态
  • 原文地址:https://www.cnblogs.com/Coding--Peasant/p/6999233.html
Copyright © 2011-2022 走看看