zoukankan      html  css  js  c++  java
  • javascript-jquery对象的动画处理

    一、显示与隐藏动画效果

    1.hide(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      $("p").hide(5000,"swing",function(){语句体});

    2.show(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      $("p").show(5000,"swing",function(){语句体});

    3.toggle(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);切换当前的显示/隐藏状态。

      $("p").toggle("slow");

    二、淡入与淡出动画效果

    fadeOut(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      方法:改变当前元素的不透明度,最终显示当前元素。

      $("p").fadeOut("slow");

    2.fadeIn(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      方法:改变当前元素的不透明度,最终隐藏当前元素。

      $("p").fadeIn("slow");

    3.fadeToggle(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      方法:切换当前元素的不透明度

      $("p").fadeoggle("slow");

    4.fadeTo()方法:把当前元素调整到指定不透明度

      $("p").fadeTo("slow",0.5);

    三、划入与划出效果

    1.slideUp(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      方法:动态改变当前元素的高度,最终隐藏当前元素,此时display:none;

      $("p").slideUp("slow");p元素0.6秒内发生划出。

    2.slideDown(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      方法:改变当前元素的高度,最终显示当前元素。

      $("p").slideDown("slow");//p元素0.6秒内发生划入

    3.slideToggle(动画持续时间,easing用来指定切换效果,动画执行完毕调用函数);

      方法:切换当前元素的高度。

      $("p").slideToggle();0.4秒内切换

    四、自定义动画效果

    1.animate():方法改变当前元素的个中css属性。

      语法:animate({需要改变的属性:值},动画持续时间,easing用来切换效果,动画执行效果完毕调用函数);

      $("p").animate({"width":"200px"},narmal);

      $("p").anmiate({"left":"+=300px"});

    2.延迟动画队列

      语法:delay(动画时间);可以是slow、normal、fast

      $("p").delay(1000).animate({"left":"300px"}).animate({"height":"100px"});//

        -延迟1秒后,p元素在0.4秒内向右使得CSS属性left值为300px。然后p元素在0.4秒内放大高度为100px。

    3.中止动画队列

      语法:stop(是否要清空未执行完的动画队列,是否直接将正在执行的动画跳转到末状态);两个参数的默认值均是false;

  • 相关阅读:
    【小5聊】腾讯位置服务之小程序简单使用以及显示附近WC步行路线
    前端面试——JS进阶
    【小5聊】腾讯位置服务之小程序简单使用以及显示附近WC步行路线
    Node学习(三)
    HTML5 知识点总结(六)
    uniapp集成unipush监听推送,处理兼容ios在线无法收到推送通知问题以及安卓推送处理
    记一些CSS属性总结(二)
    Python getattr() 函数
    python中的__init__和__new__的区别
    干货报告:八大科技领域,280 页,InfoQ《2020 中国技术发展白皮书》开放下载...
  • 原文地址:https://www.cnblogs.com/yaxinwang/p/6424618.html
Copyright © 2011-2022 走看看