侧边导航更改下拉效果。

static/script.js

@@ -33,7 +33,19 @@ $(function() {
       $(this).parent().parent().addClass('expand');
     }
   });
-
+    $.easing['jswing'] = $.easing['swing'];
+    $.extend($.easing,{
+        easeInCirc: function (x, t, b, c, d) {
+            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+        },
+        easeOutCirc: function (x, t, b, c, d) {
+            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+        },
+        easeInOutCirc: function (x, t, b, c, d) {
+            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+        }
+    });
   var navFunc = {
     navStrArr: [],
     init: function() {
@@ -124,19 +136,25 @@ $(function() {
       var self = this;
       var title = self.listBox.find("h4");
       title.bind("click", function(e) {
-        var parent = $(this).parent();
+        var parent = $(this).parent(),
+            list=parent.find("ul");
         if (parent.attr("open")) {
           parent.removeAttr("open");
           if (parent.index() == self.num) {
             $(this).addClass("current");
           }
+          list.animate({marginTop:-list.height()},400,"easeInOutCirc",function (){
+              list.css({"display":"none"})
+          })
         } else {
           parent.attr("open", true);
           if (parent.index() == self.num) {
             $(this).removeClass("current");
           }
+            list.css({"display":"block","margin-top":-list.height()});
+            list.animate({marginTop:0},400,"easeInOutCirc")
         }
-        parent.find("ul").slideToggle(300);
+        //parent.find("ul").slideToggle(300);
       });
     }
   };

static/style.css

@@ -456,6 +456,9 @@ footer ul li > a {
   cursor: pointer;
   transition: background .5s, border .5s;
   border-left: 3px solid transparent;
+    position: relative;
+    z-index: 1;
+    background: #F9F9F9;
 }
 
 .aside-container li>ul {