[JS] Background fade in and out

Résolu/Fermé
kelsett Messages postés 353 Date d'inscription dimanche 9 juillet 2006 Statut Membre Dernière intervention 13 octobre 2014 - 8 sept. 2010 à 22:17
niconovice Messages postés 954 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 3 mars 2014 - 14 sept. 2010 à 18:10
Bonjour,

Bon comme je suis une m**** en javascript je viens demander votre aide. J'ai une page avec plusieurs boutons, et j'aimerai que lorsque je clique sur un bouton le background de la page change mais avec un petit effet de fade in & out, le tout en javascript. J'ai réussi sans problème à faire changer le background, mais par contre pour l'effet de fade in & out, je n'ai pas réussi :S
Donc voilà est ce que vous pourriez me guider, voir même me donner un bout de code si vous en avez un?
Merci d'avance :)



--

4 réponses

kelsett Messages postés 353 Date d'inscription dimanche 9 juillet 2006 Statut Membre Dernière intervention 13 octobre 2014 62
9 sept. 2010 à 18:50
up... :)
0
kelsett Messages postés 353 Date d'inscription dimanche 9 juillet 2006 Statut Membre Dernière intervention 13 octobre 2014 62
10 sept. 2010 à 18:26
Up.....
0
kelsett Messages postés 353 Date d'inscription dimanche 9 juillet 2006 Statut Membre Dernière intervention 13 octobre 2014 62
12 sept. 2010 à 21:55
Up..
0
niconovice Messages postés 954 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 3 mars 2014 86
13 sept. 2010 à 01:43
faut allez faire un tour du cité de chez jquery il te réglera ça vite fait bien fait :)

grafikart l'explique très bien dans l'un de ses tutos, va voir sur son site
0
kelsett Messages postés 353 Date d'inscription dimanche 9 juillet 2006 Statut Membre Dernière intervention 13 octobre 2014 62
13 sept. 2010 à 20:43
Ok, très intérressant le blog de grafikart, par contre ya rien de plus léger? je me doutais bien qu'on pouvait réaliser ca avec la librairie jquery, mais ca rajoute quelques dizaines de Ko sur le site quand même ... x)
0
niconovice Messages postés 954 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 3 mars 2014 86
Modifié par niconovice le 14/09/2010 à 12:29
La plupart des connexions sont de plusieurs méga, ne t'en fait pas pour 70Ko de script, Jquery sera ton meilleur atout pour ce que tu veux faire, il te suffira de quelques lignes de codes pour y parvenir.
c'est parfait pour les personnes comme toi et moi qui sommes pas très fort en JS ^^

Un exemple pour faire ce que tu veux faire:
<script>
        $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100);
          });
          return false;
        }); 

      </script>


juste ça et hop un petit fadeIn sur ta div :))

le 3000 et le 100 sont des commandes de vitesse, tu pourras comme ça choisir la vitesse de ton effet ! Un truc vraiment accessible pour un debutant pour des effets pro ;)

Jquery power !!! =D

Voilà une page des fonctions qui devrait t'intéresser et n'hésite pas à retourner sur le l'excellent blog de grafikart pour mieux comprendre Jquery et pas mal d'autre trucs d'ailleurs ^^

https://api.jquery.com/category/effects/

@+
0
kelsett Messages postés 353 Date d'inscription dimanche 9 juillet 2006 Statut Membre Dernière intervention 13 octobre 2014 62
14 sept. 2010 à 18:05
Pour les 70Ko, c'est question de perfectionnisme, je fais toujours en sorte que mon site soit le plus rapide possible en économisant des lignes de codes, en compressant le tout etc.

Merci pour ton exemple, et donc pour changer le background du site il suffit que je remplace "div" par "body"? Merci
0
niconovice Messages postés 954 Date d'inscription lundi 10 novembre 2008 Statut Membre Dernière intervention 3 mars 2014 86
14 sept. 2010 à 18:10
Salut,

l'ami grafikart t'expliquera bien mieux moi :)

https://www.grafikart.fr/tutoriels/initiation-jquery-84

@+
0