让每一名学员高薪就业
返回列表 发新帖

浅谈js封装JQ中的hide方法

[复制链接]

55

主题

89

帖子

1231

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1231

版主

发表于 2018-2-1 14:46:31  | 显示全部楼层 | 阅读模式
本帖最后由 萤火虫 于 2018-2-1 14:46 编辑

上一篇文章说到用原生JS模拟jQuery中的animate()方法,今天我们来简单聊聊jQuery中的基本动画函数的hide方法。

首先,要知道hide方法是干什么的,先说一下hide到底是干什么的吧。

jQuery官方文档的介绍是:

【隐藏显示的元素】

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西

上面是官方文档的介绍,那么我们可以根据以上介绍来当做我们今天的一个需求,根据需求来完成我们的原生JS的封装。

废话不多说了,直接上代码:

  1. var hide = function(obj,speed,fn){
  2. obj = $(obj);//DOM对象
  3. if (!speed) {
  4. obj.style.display = 'none';
  5. return;
  6. }
  7. else{
  8. speed = speed==='fast'?20:speed==='normal'?30:50; //先赋值后判断速度的参数值
  9. obj.style.overflow = 'hidden';
  10. }
  11. //获取dom的宽与高
  12. var oWidth = getCss(obj,'width'),
  13.    oHeight = getCss(obj,'height');
  14. //每次dom的递减数(等比例)
  15. var wcut = 10*(+oWidth.replace('px','') / +oHeight.replace('px','')),hcut = 10;
  16. //处理动画函数
  17. var process = function(width,height){
  18. width = +width-wcut>0?+width-wcut:0;
  19. height = +height-hcut>0?+width-hcut:0;
  20. //判断是否减完了
  21. if(width !== 0 || height !== 0) {
  22. obj.style.width = width+'px';
  23. obj.style.height = height+'px';
  24. setTimeout(function(){process(width,height);},speed);
  25. }
  26. else {
  27. //减完后,设置属性为隐藏以及原本dom的宽与高
  28. obj.style.display = 'none';
  29. obj.style.width = oWidth;
  30. obj.style.height = oHeight;
  31. if(fn)fn.call(obj);
  32. }
  33. }
  34. process(oWidth.replace('px',''),oHeight.replace('px',''));
  35. }
复制代码
调用示列:
  1. hide('a','normal',function(){
  2.                     alert(“调用成功”)
  3.     });
复制代码
参数解释:

Objdom对象

Speed:速度

Fn:回调函数

以上就是模仿show方法的所有代码,希望能够对有些想继续深入原生js的朋友有所帮助,我将会持续对对应的jQuery方法进行模拟封装或深入解释jQuery库中的代码,希望大家能够多多支持。

本文为源码时代H5学科老师原创,转载请标明出处(www.itsource.cn

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表