zoukankan      html  css  js  c++  java
  • jquery学习(六)-jquery中的动画

    参考锋利的jQuery第二版

    1.show和hide方法

      调用方法:element.hide()隐藏元素,element.show()显示元素。其实说白了,其原理就是将元素的样式display值设置为none或block。

    若想让元素慢慢隐藏或显示,可以为其添加一个速度的参数,如element.show(500),表示元素会在500毫秒内慢慢显示出来。

    2.fadeIn和fadeOut方法

      fadeIn和fadeOut分别是实现元素淡入和淡出的方法。其原理是通过一段时间内改变元素的不透明度(opacity)动画来实现淡入淡出的效果的,直到元素最终显示(display:block)或消失(display:none)。

    可设置动画时长,如element.fadeOut(500)。

    3.slideUp和slideDown方法

      slideUp和slideDown分别实现上收隐藏和下拉显示的功能。其原理是通过改变元素的高度动画来实现的。如果一个元素的display:none,通过调用slideDown方法是,使得元素由上至下延伸显示。slideUp刚好与slideDown相反。

    可设置动画时长,如element.slideDown(500)。

    4.自定义动画方法animate

      方法使用animate(params,speed,easing,callback)

      Params: 一组包含作为动画属性和终值的样式属性和及其值的集合。

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

      Easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

      Callback:回调函数。

            例如:element.animate({ height: '20px' }, 500,'ease-out',
                              function(){console.log(“改变高动画”)});

    5.停止动画stop(clearQueue,gotoNnd)

      clearQueue和gotoEnd都是可选参数,为Bool值。clearQueue表示是否清空当前未执行完的动画队列,gotoEnd表示是否将正在执行的动画跳转到末状态。

      举个栗子:

      $(element).hover(function(){

             $(this).stop(false,true).animate({height:”300px”},200)

                         .animate({”200px”},300);

      },function(){

             $(this).stop(false,true).animate({height:”30px”},200)

                         .animate({”20px”},300);

      });

    6.判断处于动画状态

      在使用动画的时候往往为了防止动画的积累,导致动画与用户行为不一致。此时就需要我们知道当前元素是否处于动画状态,当元素不出于动画阶段到为其添加动画,否则不添加。

      举个栗子:

      If(!$(element).is(“:animated”)){

             //当没有动作状态时,才添加动画

      }

    7.动画延迟delay()

                Delay方法允许我们将队列中的函数延迟执行。

                         $(element).animate({”20px”},300).delay(1000)    //延迟1000毫秒

                                . animate({”200px”},300);

    8.toggle方法元素状态切换

               $(element).toggle(fn1,fn2,fn3…)轮流循环切换。

    9.slideToggle方法

      通过高度变化来切换匹配元素的可见性。即实现元素下拉显示和上滑隐藏切换。

       $(element).slideToggle();

  • 相关阅读:
    (转)c++中NULL与nullptr的区别
    剑指offer:面试题1:赋值运算符函数
    剑指offer开篇
    立flag
    牛客网程序员面试金典:1.2——原串翻转(java实现)
    牛客网程序员面试金典:1.1确定字符互异(java实现)
    剑指Offer:面试题34——丑数(java实现)
    剑指Offer:面试题33——把数组排成最小的数(java实现)(未完待续)
    剑指Offer:面试题32——从1到n整数中1出现的次数(java实现)
    8种网站防盗链手段
  • 原文地址:https://www.cnblogs.com/hcw136156133/p/5086915.html
Copyright © 2011-2022 走看看