Problème tutoriel [Mauvais fonctionnement]

Kboirel
Javascript

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();
});

9 réponses

Kboirel
Auteur
Réponse acceptée

J'ai refait tout a partir de zéro en suivant bien le tutoriel ^^ Ça marche ;) Merci de vos réponses.

WinuX
Réponse acceptée

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

Kboirel
Auteur

Personne pour m'aider ?

wallerand

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); })
}
Kboirel
Auteur

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();
});
WinuX

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à.

Mousse

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.

Kboirel
Auteur

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 ;)

zvetlania

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 )