Bonjour,
Me voila en train de suivre le tutoriel concernant l' Effet de lueur en Javascript.
J'ai suivit tout le tutoriel, et j'en suis arrivé a un résultat qui n'est pas celui attendue : le fond ne bouge pas :/
Lorsque je focus le input, le fond coloré apparait mais ne coulisse pas sur le coté comme il le devrait...
Pourriez-vous m'aider s'il vous plaît ?
Je vous laisse mon code glow.js à votre disposition :
$(function(){
$("#login").prepend('<div id="glowContainer"><div id="glow"></div></div>');
$("#glowContainer").hide();
$("input").focus(function(){
$('#glowContainer').stop().fadeIn();
});
$("input").blur(function(){
$("#glowContainer").stop().fadeOut();
});
function animateGlow(){
div =$("#glow")
div.css({backgroundPosition:"0 0"})
.animate({backgroundPosition:"-3000px 0"},25000,"linear");
}
animateGlow();
});Essaye sa à la place de la function animateGlow()
function animateGlow(div){
div.css({backgroundPosition:"0 0"})
.animate({backgroundPosition:"-3000px 0"},25000,"linear",function(){ animateGlow(div); })
}Personne pour m'aider ?
Merci pour ta réponse, mais malheureusement, il n'y pas aucun changement ...
$(function(){
$("#login").prepend('<div id="glowContainer"><div id="glow"></div></div>');
$("#glowContainer").hide();
$("input").focus(function(){
$('#glowContainer').stop().fadeIn();
});
$("input").blur(function(){
$("#glowContainer").stop().fadeOut();
});
function animateGlow(div){
div.css({backgroundPosition:"0 0"})
.animate({backgroundPosition:"-3000px 0"},25000,"linear",function(){ animateGlow(div); })
}
animateGlow();
});Ta fonction animateGlow prend pour paramètre une div, div que tu ne précises pas lors de l'appel de la fonction.
Ptete que l'erreur vient de là.
Si tu ne l'utilises pas déjà, télécharge l'addon Firebug pour Firefox. Une fois installé, clique sur l'icone du cafard en bas à droite de la page, dans l'onglet SCIPT, vérifie qu'il voit bien ton code, et puis dans l'onglet Console, regarde s'il ne te met pas une erreur.
J'ai refait tout a partir de zéro en suivant bien le tutoriel ^^ Ça marche ;) Merci de vos réponses.
La fonction animate permet de faire une fonction callback, donc test ça :
$(function(){
$("#login").prepend('<div id="glowContainer"><div id="glow"></div></div>');
$("#glowContainer").hide();
$("input").focus(function(){
$('#glowContainer').stop().fadeIn();
});
$("input").blur(function(){
$("#glowContainer").stop().fadeOut();
});
function animateGlow(){
div =$("#glow")
div.css({backgroundPosition:"0 0"})
.animate({backgroundPosition:"-3000px 0"},25000,"linear",function(){
div.animate({backgroundPosition:"0 0"},25000);
});
}
animateGlow();
});Ca fera un allez retour comme ça en continue.
EDIT: T'as édité xD
Oui excuse moi vraiment :/ J'ai croisé les doigts pour que personne n'ai lut le message avant le 3 eme et derniere Edit :s J'en suis navré désolé...
En tout cas tout marche à merveille merci à tous ;)
A mon avis tu as eu le même souci que moi : backgroundposition s'active mais uniquement avec une ancienne version de jquery ( 1.3.2 chez moi, la version chopée sur la ressource grafikart )