Problème sur FadeTo

agrafik
Javascript

Bonjour ,

Je viens à votre secourt car j'ai un petit soucis. J'ai un site web que je souhaiterais enfin finr, mais j'arrive à la partie javascript du footer pour clore cette partie mais y'a des soucis. (URL : http://dizcreate.fr )

En effet,sur l'url ci dessus vous avez en bas un espace "social" donc le code est:

<div id="social">
            <a class="facebook" href="http://www.facebook.com/pages/DizCREATE/155258167860689?ref=ts"> Facebook </a>
            <a class="twitter" href="http://twitter.com/#!/DizCREATE"> Twitter </a>
            <a class="vimeo" href="http://vimeo.com/user6128897"> Vimeo </a>
        </div>

Comme vous le voyez j'aimerais qu'il soi par défaut à 0.25 d'opacité et au mouseover j'aimerais qu'il passe à 1. J'ai donc fait ça voir, en testant d'abord mon fichier avec un alert("present");
qui a était un succes,j'ai un soucis.: 

$(function(){
    var socialCourant = null;
        $("#social").css("opacity", 0.25);
            $("a").mouseover(function(){
             $(this).find("#social").stop().fadeTo(1000,1);
        });

        $("a").mouseout(function(){
           $(this).find("#social").stop().fadeTo(1000, 0.5);
        }); 
});

Voilà ce que j'ai fait, mais sans succès. :S . Merci pour votre aide :).

++ = )

5 réponses

agrafik
Auteur
Réponse acceptée

J'ai réglé le soucis, merci pour vos réponses :).

Voici le code pour les intéréssés:

$(document).ready(function() {   
    $(".social a").css("opacity","0.4");
        $(".social a").hover(function () {        
        $(this).stop().animate({opacity: 0.8}, 400);
    },
    function() {
        $(this).stop().animate({opacity: 0.8}, 400);
    });
        $(".social a").mouseout(function () {         
        $(this).stop().animate({opacity: 0.4}, 400);
    },
    function() {
        $(this).stop().animate({opacity: 0.4}, 400);
    });
});
Kaginics

Nomalement tu peux le faire avec du css avec la balise opacity ce qui donnerais :

#social a{
    opacity:0,25; 
}
#social a:hover{
    opacity:1;
}

en espérant avoir répondu a ta question ...

agrafik
Auteur

Oui mais c'est "direct" comme le logo de mon header, je voudrais une progression. Mais merci quand même pour ta réponse :).

Jo'

Essaye de gérer ton effet avec "animate".

Ca te donnera un effet progressif et non direct :)

agrafik
Auteur

SalutJo . Et oui j'ai essayé mais soit je ne saispas le faire, soit mon code ne fonctionne pas ,avec le animate j'ai ça en code, et regarde sur http://dizcreate.fr , je résultat est pareil (ceci dit il repère l'opacité de départ tout de même) :

$(function(){
      var socialCourant = null;
            $(".social").css("opacity", 0.4);
                     $("a").mouseover(function(){
            $(this).find(".social").animate({ opacity: 1}, 500 );
            });
        $("a").mouseout(function(){
           $(this).find(".social").animate({ opacity: 0.4 }, 500 );
                   });
});