jquery - Jquery 动画滑动菜单

Question

我正在使用jQuery Mobile构建一个 Web 应用程序，它有一个像 Facebook 应用程序一样的滑出菜单。我的菜单运行良好，但我想在它滑出时添加反弹效果。

这是我所拥有的：

$("a.showMenu").click(function() {
    if (menuStatus != true) {
        $(".ui-page-active").animate({
            left: 250,
        }, 400, function() {
            menuStatus = true
        });
        return false;
    } else {
        $(".ui-page-active").animate({
            left: 0,
        }, 300, function() {
            menuStatus = false
        });
        return false;
    }
});

我的 jQuery 技能非常有限。任何人都可以帮助我实现这一目标。

提前致谢。

Answer 1

看看 George McGinley Smith 的easing 插件。

试试这个例子（未经测试）：

$("a.showMenu").click(function(){
    if(menuStatus != true){             
    $(".ui-page-active").animate({
        left: 250,
      }, 400, 'easeOutBounce', function(){menuStatus = true});
      return false;
      } else {
        $(".ui-page-active").animate({
        left: 0,
      }, 300, function(){menuStatus = false});
        return false;
      }
});