jquery 动画(jQuery 动画计数器下载) 收藏 0

继承Jquery的方法–tab滑动动画切换

前言

最近产品有个需求，要做个tab标签切换，这最基本的样式当然不在话下，但作为极客的我总要与众不同吧！于是大开脑洞，也就想出了个tab切换时候加个滑动动画（表笑我，谁让咱没达到UI交互设计师的高度呢），再然后正好想起本站曾经有个效果（传送门），于是乎找了这个效果demo给产品看，产品欣然同意了。

那么，问题又来了，之前的这个效果有几个弊端，也是我和产品认为不好的：

1. 不同tab页的内容高度不同，差距可能还比较大，不能用一个统一的固定高度来搞

2. 例如从tab1跳到tab3这种跨项的情况，原则上是不能让用户在动画过程中看到tab2内容的（不要问为什么，这就是极客精神），如果从tab1跳到tab5，中间跨了3项，这体验总感觉略low啊

因此，轮子还得造！

需求功能

1. 不固定高度。高度不同的tab页直接也可以自适应切换

2. 跨项无缝切换。跨项切换时候不会看到中间项内容

3. tab标题也增加滑动动画

思路分析

1. 所谓不固定高度，那么只有在即将动画时拿到切换前和切换后两个tab页中较大的高度进行设置

2. 跨项不显示中间项的话，那么只有“造假”了：把切换前和切换后的两个tab页克隆下来构造个动画区，放到最前面，走个过场动画，同时隐藏掉原来真实tab页，结束后remove掉动画区，同时将真实tab页展现（本人觉得这是个简单的笨办法，如果大神有更合适的思路可以留言讨论）

代码赏析

以下是jquery插件的原代码，注释可以说的手把手的教学！每一步都写了注释，重点就是看“tab页动画部分”的注释

$.fn.extend({tab: function (index) {//index:初始化后第几个tab显示，默认0    this.each(function () {      var animating = false;//动画进行中的标识，保证不会在动画过程中再次执行动画      var $this = $(this);      var $tabCard = $this.children(\”.tab-card\”);      var $tabCards = $tabCard.children();      var $tabPaper = $this.children(\”.tab-paper\”);      var $tabPapers = $tabPaper.children();      var curIndex = $tabCards.filter(\”.cur\”).index();//通过cur获取当前tab页序号      curIndex = index || (curIndex == -1 ? 0 : curIndex) || 0;//参数index优先级最高      //初始化cur状态      $tabCards.removeClass(\”cur\”);      $tabPapers.removeClass(\”cur\”);      $tabCards.eq(curIndex).addClass(\”cur\”);      $tabPapers.eq(curIndex).addClass(\”cur\”);      /*************************tab标签的动画部分*************************/      /*此段代码借鉴lavaLamp，构造一个绝对定位的back li在滑动*/      $tabCard.each(function () {        var b = $(this), noop = function () {        }, $back = $(\'<li class=\”back\”><div class=\”left\”></div></li>\’).appendTo(b), $li = $(\”li\”, this), curr = $(\”li.cur\”, this)[0] || $($li[0]).addClass(\”cur\”)[0];        $li.not(\”.back\”).hover(function () {          move(this)        }, noop);        $(this).hover(noop, function () {          move(curr)        });        $li.not(\”.back\”).click(function (e) {          if (!animating) {            setCurr(this);          }        });        setCurr(curr);        function setCurr(a) {          $back.css({\”left\”: a.offsetLeft + \”px\”, \”width\”: a.offsetWidth + \”px\”});          curr = a        }        function move(a) {          $back.each(function () {            $(this).dequeue()          }).animate({width: a.offsetWidth, left: a.offsetLeft}, 500, \”easeOutBack\”);        }      });      /*************************tab页动画部分*************************/      /*tab标签点击*/      $tabCards.on(\”click\”, function () {        slide(this)      });      /*直接更改当前tab标签样式*/      function changeCard(the) {        var $t = $(the);        $t.addClass(\”cur\”).siblings().removeClass(\”cur\”);      }      /*直接切换tab页内容位置*/      function changePaper(the) {        var $t = $(the);        var ci = $t.index();        $tabPapers.eq(ci).addClass(\”cur\”).siblings().removeClass(\”cur\”);        curIndex = ci;        $tabPaper.height($tabPapers.eq(ci).height());      }      /*tab页滑动动画*/      function slide(the) {        if (!animating) {          var $t = $(the);          changeCard(the);          var ci = $t.index();          // 当前页和切换页相同时 直接返回          if (ci == curIndex) return;          var $fromPaper = $tabPapers.eq(curIndex);          var $toPaper = $tabPapers.eq(ci);          //克隆一个当前页和一个切换页，后续只做动画使用          var $fromPaper_clone = $fromPaper.clone();          var $toPaper_clone = $toPaper.clone();          //获取tab页宽度，padding样式          var paperWidth = $tabPaper.width();          var paperPadding = $tabPaper.css(\”padding\”);          var paperPaddingLeft = parseInt($tabPaper.css(\”padding-left\”));          //通过宽度和padding计算总宽度          var paperWidthTotal = paperWidth + 2 * paperPaddingLeft;          //比较当前页和切换页的高度，选取高的作为动画时的高度          var paperHeight = Math.max($fromPaper.height(), $toPaper.height());          //定义动画区样式          $fromPaper_clone.css({            float: \”left\”,            display: \”block\”,            background: \”#fff\”,            padding: paperPadding,            width: paperWidth,            height: $fromPaper.height()          });          $toPaper_clone.css({            float: \”left\”,            \”display\”: \”block\”,            background: \”#fff\”,            padding: paperPadding,            \”width\”: paperWidth,            height: $toPaper.height()          });          //定义动画区，此动画区只作动画使用，动画完成后立刻remove          var $animateArea = $(\”<div></div>\”);          $animateArea.css({            \”position\”: \”absolute\”,            \”top\”: 0,            left: 0,            width: 2 * paperWidthTotal,            height: paperHeight          });          //定义动画到达的位置，比较切换页和当前页序号大小，以此决定动画是向前滑动还是向后滑动          var animateLeft;          if (ci > curIndex) {            $animateArea.css(\”left\”, 0).append($fromPaper_clone).append($toPaper_clone);            animateLeft = -paperWidthTotal;          } else if (ci < curIndex) {            $animateArea.css(\”left\”, -paperWidthTotal).append($toPaper_clone).append($fromPaper_clone);            animateLeft = 0;          }          //动画区被加载，同时tab页高度改变，真实tab透明隐藏          $tabPaper.append($animateArea);          $tabPaper.height(paperHeight);          $tabPapers.css({\”opacity\”: 0, filter: \”alpha(opacity=0)\”});          //执行动画，动画结束后remove掉动画区，直接定位并显示出真实tab页内容          animating = true;          $animateArea.animate({left: animateLeft}, 500, \”easeOutQuint\”, function () {            $animateArea.remove();            changePaper(the);            $tabPapers.css({\”opacity\”: 1, filter: \”alpha(opacity=100)\”});            animating = false;          });        }      }    });  }});

效果预览~~

在线代码调试：地址

查看完整代码及详细内容：http://www.gbtags.com/gb/share/5781.htm

jQuery 动画制作与特效

使用show()和hide()方法

在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。

在jQuery中提供了show()和hide()两个方法,来直接实现元素对象的显示和隐藏。

jQuery代码：

HTML代码：

制作多级菜单

jQuery代码:

HTML代码:

理解: e.target是引发事件的元素

this是当前执行事件句柄的元素,this等于e.currentTarget(在事件冒泡阶段中的当前DOM元素 )

if(this==e.target)语句作用。

this指的是定义事件的所有含有ul的li标签。

e.target指的是触发事件的对象,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事件，

所以必须添加判断, 只有点击当前菜单选项时才执行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,

显然是不行的, 你可以去掉判断看看效果就明白了。

使用toggle()方法实现显隐切换

曾经介绍过toggle()方法,该方法接受两个函数作为参数,相互切换;

如果不接受参数,toggle()方法将默认为在show()和hide()之间切换,因此修改上面案列为:

HTML代码:

元素显隐和渐入渐出效果

show(duration,[callback]) duration表示动画执行的时间长短,可以是表示速度的字符串,包括slow、normal、fast，

也可以是表示时间的整数(毫秒);callback为可选的回调函数,在动画完成后执行;

jQuery代码：

HTML代码：

与show()和hide()方法一样,toggle()方法也可以接受两个参数,制作成动画的效果;

jQuery代码：

HTML代码:

使用fadeIn()和fadeOut()方法

fadeIn(duration,[callback]) 渐显(颜色增强)

fadeOut(duration,[callback]) 渐隐(颜色褪色)

其中参数duration和callback与slow()、hide()中的完全相同;

制作渐渐褪色的动画效果:

jQuery代码:

HTML代码:

使用fadeTo()方法自定义变幻目标透明度;

jQuery代码:

fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.其中opacity的取值范围为0.0~1.0

HTML代码:

当使用fadeOut()方法时,图片完全消失后将不在占用<p>的空间,

而使用fadeTo(1000,0)时,虽然图片也完全不显示,但仍然占用着标记<p>的空间

幻灯片效果

slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

slideUp(duration,[callback]) 上滑(消失)

slideDown(duration,[callback]) 下滑(显示)

jQuery代码:

HTML代码:

停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

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

点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML 代码:

jQuery 代码:

实例：阻止动画播放

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

总结：

1、基本效果

show()：将隐藏的元素显示

show(speed,[callback]) ：以动画的效果显示

hide()：将显示的元素隐藏

hide(speed,[callback]) ：以动画的效果隐藏

toggle()：显示或者隐藏

toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐藏

toggle(speed,[callback])：以动画的方式显示或者是隐藏

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

2、滑动效果

slideDown()：将隐藏的元素显示

slideDown(speed,[callback]) ：以动画的方式显示

slideUp()：将显示的元素隐藏

slideUp(speed,[callback]) ：以动画的方式隐藏

slideToggle()：隐藏或显示

slideToggle(speed,[callback])：以动画的方式隐藏或者显示

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

3、淡入淡出

fadeIn()：淡入

fadeIn(speed,[callback]) ：以动画的方式进行淡入

fadeOut()：淡出

fadeOut(speed,[callback])：以动画的方式进行淡出

fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值

opacity：透明度 取值：0-1之间 0表示完全透明 1表示不透明

callback：回调函数 当动画执行完毕以后再来执行的函数

show() 显示元素 hide()隐藏元素 toggle()显示和隐藏切换

fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换

slideUp() 幻灯片上滑(消失) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换

4 停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

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

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com