Question

我正在尝试将Hammer.js和jquery.transit结合起来在侧边菜单上创建一个漂亮的拖动效果，但是，我无法让jquery.transit工作（是的，这听起来很愚蠢...... ）。

这就是我所拥有的

var $mainPage = $('#main-page');
  var drawer = 0;
  if(Modernizr.touch){
    $mainPage.hammer()
              .on('swiperight', function(e){
                if(drawer){
                  return true;
                }
                $mainPage.transition({ x: 260 });
                drawer = 1;
              })
              .on('swipeleft', function(e){
                if(!drawer){
                  return true;
                }
                $mainPage.transition({ x: 0 });
                drawer = 0;
              });

但是，我一直得到Object [object Object] has no method 'transition' ......任何想法为什么？

Answer 1

请查看以下示例，并注意传递给prevent_default: true的{{1}}选项，以便在设备上顺利运行。关于你的错误，我猜你没有使用hammer.js的jquery插件，因为它在下面的例子中运行正常。

http://jsbin.com/ExECiHUS/1/edit

<强> HTML

hammer.js

<强> JS

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

  <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/jquery.hammer.js"></script>

<title>JS Bin</title>
</head>
<body>

  <div id="main-page" style="background-color:grey;height:100px;">this is main page</div>

</body>
</html>

无法设法让jquery.transit工作

1 个答案:

http://jsbin.com/ExECiHUS/1/edit