无法让 jquery.transit 工作答案

【问题标题】：Can't manage to make jquery.transit to work无法让 jquery.transit 工作
【发布时间】：2014-01-14 08:42:18
【问题描述】：

我正在尝试结合 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'...知道为什么吗？

【问题讨论】：

标签： javascript jquery css transition hammer.js

【解决方案1】：

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

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

html

<!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>

var $mainPage = $('#main-page');
  var drawer = 0;
  //if(Modernizr.touch){
    console.log($mainPage);
$mainPage.hammer({prevent_default: true})
              .on('swiperight', function(e){
                console.log('swipe right');
                if(drawer){
                  return true;
                }
                                            console.log('transition');
                $mainPage.transition({ x: 260 });
                drawer = 1;
              })
              .on('swipeleft', function(e){
                console.log('swipe left');
                if(!drawer){
                  return true;
                }
                $mainPage.transition({ x: 0 });
                drawer = 0;
              });
  //}else{
    //console.log('touch events not supported!');
  //}

【讨论】：

我无法解释...我有几乎完全相同的代码，但我不断收到相同的错误并且没有任何动作...
@Axiol 你能把你的代码放到网上吗，例如 jsfiddle,jsbin，让我看看？谢谢
这是一个完整的 WP 项目，但我会在白天进行。但是，我能看到的唯一区别是，在我的项目中，Modernizr 加载在页面顶部，其他所有内容都压缩在页面底部的一个文件中。
@Axiol 将输出到控制台，如示例中所示的console.log($mainPage);，以检查 jQuery 是否正常工作并且元素已被选中。此外，此代码应遵循包含库的内容，以便 jQuery、hammerjs 和 jquery.transition 可用。
@Axiol 还可以通过在上面的代码中输入 console.log(jQuery().jquery); 来检查您实际使用的 jquery 版本。