Swipe avec avec Hammer.js
Bonjour !
Je tente d'utiliser le swipe left pour décaler mon menu (grâce à Hammer.js).
J'ai bien déclaré le fichier JS où se trouve la librairie Hammer.JS (j'ai du fouiller sur Google un plugin jQuery pour Hammer.JS, que j'ai trouvé et que j'ai inclus dans le même fichier que la librairie. La console ne s'affolant pas, je pense que ça fonctionne).
J'ai donc testé le bon fonctionnement de la librairie avec ce code:
Code:
1
2
3
4
5
6
7
8
9
| (function($){
var $sitePusher = $('.site-pusher');
$sitePusher.hammer()
.on('swipeleft', function(e){
console.log('hello');
})
})(jQuery); |
et ça fonctionne ! La console m'affiche bien "hello" quand je fais un swipe sur le div qui englobe tout le contenu de la page.
Mais lorsque je tente d'appliquer une transformation CSS à ce site pusher avec translateX... plus rien ne fonctionne. Aucun message de la console, mais aucun résultat après le swipe, rien ne se décale. Voilà mon code:
Code:
1
2
3
4
5
6
7
8
9
| (function($){
var $sitePusher = $('.site-pusher');
$sitePusher.hammer()
.on('swipeleft', function(e){
$sitePusher.animate({translateX: '-250px'}, 250);
})
})(jQuery); |
Je repète: mon menu se trouve à droite de mon site, ce qui explique pourquoi je décide de décaler mon site de -250px, pour qu'il se déplace à gauche et non pas à droite.
Pourquoi ce code ne fonctionne pas? Faut-il appliquer la transformation autre part?
Je vous remercie, très bon week end à tous !
Edit: j'ai aussi essayé ce code:
Code:
1
2
3
4
5
6
7
8
9
| (function($){
var $sitePusher = $('.site-pusher');
$sitePusher.hammer()
.on('swipeleft', function(e){
$sitePusher.animate({transform: 'translateX(-250px)'}, 250);
})
})(jQuery); |
étant donné que translateX n'est qu'une valeur de transform et non pas une propriété, j'ai rajouté le "transform", mais rien ne change.
