我试图结合 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'...知道为什么吗？
最佳答案
请查看以下示例并注意传递给 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>
js
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!');
//}
关于javascript - 无法使 jquery.transit 正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21109090/