jQuery - 02. 样式表属性操作/类操作、动画、显示隐

来源:http://www.chinese-glasses.com 作者:Web前端 人气:52 发布时间:2020-04-22
摘要:看起来不错,但总觉得还差点什么,原来stop()只停止了第一个动画( [ hide()] ),对于后续的多个动画( [ fadeIn() ] ...)就无能为力了;然后看了一下stop()的语法: 动画 显示/隐藏:

看起来不错,但总觉得还差点什么,原来stop()只停止了第一个动画( [ hide() ] ),对于后续的多个动画( [ fadeIn() ] ... )就无能为力了;然后看了一下stop()的语法:

动画

 显示/隐藏:

  .show/.hide/.toogle()    括号可以啥都不写  ;是通过display:block/none。来实现隐藏和显示

  .show/.hide/.toogle(毫秒值) 固定时间 ;  通过控制宽高透明度。dispaly控制/各属性只在变换的时候才存在,显示完毕后,宽高和opacity属性清楚

  .show/.hide/.toogle(fast/normer/slow):   slow:(慢600ms)/normer:正常400毫秒/fast:快:200毫秒

10bet,  .show/.hide.toogle(fast/normer/slow,function(){函数});  回掉函数。显示完毕后执行回调函数

  无参数/毫秒数/字符串/回调函数

 滑入/滑出:          淡入/淡出    自定义

  .slideDown() 显示  fadeIn:显示  .animate({json串},时间,回调函数)

  slideUp();  隐藏     fadeOut:隐藏  animate不支持背景色

  .toogle();      fadeToggle: 切换

 停止动画:

  .stop(false,fasle) 停止执行当前正在执行的动画,执行下一个动画

  .stop(true,false)

        清空队列,后续动画不执行

      1. 不立即完成当前动画,只是停止.stop(false,false)
      2. 不清空队列,后续动画执行
      3. 停止完成当前动画,执行下一个动画
  1. .stop(true,true)

    1. 清空动画队列,不执行以后的动画
    2. 立即完成当前的动画

.stop(false,true)

  1. 不清空动画队列,后续动画执行
  2. 立即完成当前动画后,执行下一个动画

    第一个参数判断是否清空队列。可以立即结束动画。

      true  清空      false  不清空

    第二个参数让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等

    1.   true  立即完成
    2.   false  不立即完成

节点操作:

  创建jQuery对象

    $name = $("<li></li>"); 创建一个li标签

    $("标签名“).html("内容") 

  添加对象

    $("目标位置“).append("要添加的元素");  在目标最后的位置添加

    newNode.appendTo($('添加到哪') ;

$("#siteInfo").hide(function () { $("#siteInfo").empty(); getSite();}).fadeIn();

清空节点:

    $("node").html("空字符") ;

    $("node").empty()

  删除指定元素. $("node").remove();删除自身

但由于动画有完成时间,导致频繁切换日期的时候出现了动画累积的现象,操作停止后累积的动画仍在继续,这样的用户体验感是很差的,于是想到了stop()方法来停止动画

类操作

  .addClass添加类    $("div").addClass("class");

  .removeClass删除类   $("div).removeClass("class");

  hasClass判断是否有类 $("div).hasClass("class");

  .toggleClass 切换类    $("div").toggleClass("class");   有class类将删除 没有将添加class类

日程提醒(跟日历一样的切换效果),只用一个div来展示当天日程数据,每次清空div里的数据再加载数据,导致切换日期时,数据展示div有闪动,于是采用动画来进行过渡,这样就巧妙地避免了闪动;

    prepend() 在盒子最前面添加  newNode.prependTo($('要添加到哪'));

    $("").after(newNode): 兄弟之后。   成倍添加

    $("").before(newNode); 在兄弟之前

本文由10bet发布于Web前端,转载请注明出处:jQuery - 02. 样式表属性操作/类操作、动画、显示隐

关键词:

最火资讯