Problème Jquery easing

nano855
Javascript

Bonjour je suis novice en javascript et j'ai voulu adapter le tuto: Créer un menu "Elastic" avec jQuery.

au lieu d'avoir une boite qui se place sur l'onglet au moment du hover j'ai voulu animé mon background( qu'il passe d'une coordonnée de -65 à 0).
Tous marche bien le background est bien décalé, le temps fonctionne aussi, mais l'animation ne s'exécute pas.

voilà mon code:
$(document).ready(function(){
var effet = 'easeOutElastic';
var posNormal ='0 -65px';
var posHover ='0 0'

$('#menu2 ul li a').css({backgroundPosition: posNormal});

$('#menu2 ul li').hover(function(){
$('#menu2 ul li a:hover').stop().animate({backgroundPosition: posHover},{duration:300, easing:effet});
});
$('#menu2 ul li').mouseout(function(){
$('#menu2 ul li a').stop().animate({backgroundPosition: posNormal},{duration:100, easing:effet});
});
});

Est-ce que quelqu'un sais d'où cela peut provenir ? j'ai plus d'idées.

1 réponse

BlackDesign

Bonjour, je pense que tu a fait une erreur à ces niveau la :

$('#menu2 ul li a:hover').stop().animate({backgroundPosition: posHover},{duration:300, easing:effet});

je pense que sa devrais être sa plutôt 

$('#menu2 ul li a:hover').stop().animate({background-position: posHover},{300, effet});

Changement effectué backgroundPosition en background-position, et j'ai retiré la mention duration et easing.
Du coups même changement à ce niveau la : 

$('#menu2 ul li a').stop().animate({backgroundPosition: posNormal},{duration:100, easing:effet});

en 

$('#menu2 ul li a').stop().animate({background-position: posNormal},{100, effet});

et enfin : 

$('#menu2 ul li a').css({backgroundPosition: posNormal});

en 

$('#menu2 ul li a').css({background-position: posNormal});

J'espère que sa peut t'aider.