• jQuery动画


    一,show()和hide()方法
      show()方法中传人参数slow,normal,fast,可以指定数字,表示显示速度
      hide()方法中传人参数slow,normal,fast,可以指定数字,表示消失速度
    二,fadeIn()和fadeOut()方法
      指定不透明度
      fadeOut(),在指定的时间内,减低元素的不透明度,直到完全消失
      fadeIn(),在指定的时间内,增加元素的不透明度,直到完全显现
    三,slideUp()和slideDown()方法
      改变元素的高度
      slideDown(),对于display为none的元素,由上至下的延伸显示
      slideUp(),对于display为none的元素,由下至上的延伸显示
    四,自定义动画animate()
      语法结构,animate(params,speed,callback)
        params:包含样式属性及值的映射{property:"value1",property:"value2"}
        speed:速度参数,可选
        callback:在动画完成时执行的函数,可选
      1,自定义简单动画
      animate({left:"500px"},300);移动到指定位置
      2,累加累减动画
      animate({left:"+=500px"},400);当前位置累加500px
      3,多重动画
      animate({left:"400px",right:"400px"},500);
      4,综合动画
      $(this).animate({left:"400px",height:"400px",opacity:"1"},3000).animate({top:"200px","200px"},2000).fadeout("slow");
    五,动画回调函数
      动画执行结束后执行的函数
      $(this).animate({},100,function(){$(this).css("border","5px solid blue");});
    六,停止动画和判断是否处于动画状态
      1,停止动画
      stop([clearQueue].[gotoEnd]);立即停止当前正在进行的动画
      clearQueue为布尔值,表示是否清空未执行的动画队列
      gotoEnd为布尔值,表示是否直接将正在执行的动画跳转到末状态
      2,判断是否处于动画状态
      is(":animated")
      if(!$(element).is(":animated")){//如果当前没有处于动画状态}
      3,延迟动画
      delay()方法,传人延迟时间
      $(this).animate({left:"400px",height:"200px"},200).delay(1000);
    七,其他动画方法
      1,toggle()方法,切换元素的可见状态
      $(this).next().toggle();
      2,slideToggle()方法
      通过高度变化来切换匹配元素的可见性
      $(this).next().slideToggle()
      3,fadeTo()方法
      通过切换元素的不透明度以渐进方式调整到指定值
      $(this).next().fadeTo(600,0.2)
      4,fadeToggle()方法
      通过不透明变化来切换匹配元素的可见性
      $(this).next().fadeToggle()
    八,动画方法概况
      1,一组元素上的动画效果
      在一个animate()方法中应用多个属性,动画是同时发生的
      以链式的写法应用动画,是按顺序执行的
      2,多组元素上的动画效果
      默认情况都是同时发生的
      以回调的形式应用动画方式时(动画的回调函数和queue方法的回调函数),动画按回调顺序发生的

  • 相关阅读:
    深入理解javascript原型和闭包(1)——一切都是对象
    深入理解javascript原型和闭包(2)——函数与对象的关系
    js 的function为什么可以添加属性
    Nodejs入门
    js数组的比较
    对Array.prototype.slice.call()方法的理解
    elementUI el-select 多选情况下包含全部选项,及获得选中项的label
    JS对象,获取key和value
    elementUI实现前端分页
    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
  • 原文地址:https://www.cnblogs.com/b0xiaoli/p/3675571.html
Copyright © 2020-2023  润新知