文章/答案/技术大牛

发布

社区首页 >问答首页 >无法使jquery.transit正常工作

问无法使jquery.transit正常工作
EN

Stack Overflow用户

提问于 2014-01-14 16:42:19

回答 1查看 181关注 0票数 1

我试图将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'..。知道为什么吗？

css

transition

hammer.js

javascript

jquery

回答 1

Stack Overflow用户

发布于 2014-01-14 17:15:36

请看下面的示例，并注意传递给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!');
  //}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21109090

复制

相似问题

问无法使jquery.transit正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使jquery.transit正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法使jquery.transit正常工作
EN