1#
  1. movePageHover:function(start, end, anim, callback, _this){
  2.             //获得页码数判断切换层级
  3.             var startPid = start.attr("pid") || start.attr("bid");
  4.             var endPid = end.attr("pid") || end.attr("bid");

  5.             //ab为-1,从右到左划。其他则从左到右划
  6.             var ab = catchId(startPid,endPid);

  7.             //定义动画结束时执行的事件
  8.             start.css({"display": "block", "zIndex": "1", "opacity": "1"}).off("webkitAnimationEnd").on("webkitAnimationEnd", function(){
  9.                 start.removeAttr("style");
  10.                 start.css("display", "none");
  11.             });

  12.             end.css({"display": "block", "zIndex": "2", "opacity": "1"}).off("webkitAnimationEnd").on("webkitAnimationEnd", function(){
  13.                 end.removeAttr("style");
  14.                 end.css("display", "block");
  15.             });

  16.             //开始定义动画
  17.             var moveAnaFrames = $("#_moveAnaFrames_");
  18.             if (moveAnaFrames != null) {
  19.                 moveAnaFrames.remove();
  20.             }

  21.             var _styleCss = "<style id='_moveAnaFrames_'>";

  22.             var runTime = 0.3;
  23.             var ease = "ease-out";

  24.             switch (anim){
  25.                 case "move":
  26.                     if (ab != -1) {
  27.                         _styleCss += "@-webkit-keyframes pageAnimateRunCurrent { from {-webkit-transform: translate3d(0px, 0px, 0px);} to {-webkit-transform: translate3d(-100%, 0px, 0px);} }";
  28.                         _styleCss += "@-webkit-keyframes pageAnimateRunTarget { from {-webkit-transform: translate3d(100%, 0px, 0px);} to {-webkit-transform: translate3d(0px, 0px, 0px);} }";
  29.                     } else {
  30.                         _styleCss += "@-webkit-keyframes pageAnimateRunCurrent { from {-webkit-transform: translate3d(0px, 0px, 0px);} to {-webkit-transform: translate3d(100%, 0px, 0px);} }";
  31.                         _styleCss += "@-webkit-keyframes pageAnimateRunTarget { from {-webkit-transform: translate3d(-100%, 0px, 0px);} to {-webkit-transform: translate3d(0px, 0px, 0px);} }";
  32.                     }
  33.                     break;
  34.             }



  35.             _styleCss += "</style>";
  36.             $("head").append(_styleCss);

  37.             //开始执行滑动动画
  38.             start.css("-webkit-animation", "pageAnimateRunCurrent " + runTime + "s " + ease);
  39.             end.css("-webkit-animation", "pageAnimateRunTarget " + runTime + "s " + ease);

  40.             //start.css("display", "none");
  41.             //end.css("display", "block");

  42.             if(callback instanceof Function)
  43.                 callback();

  44.             return false;
  45.         },
复制代码