Bonsoir,

J'aimerai cacher un élément html à l'aide de jquery. J'ai pour cela utiliser la fonction hide() et fadeOut().
Cependant je me suis aperçu qu'en utilisant ces fonctions, c'etait l'equivalent d'un display: none.
Ma question: existe-t-il une fonction qui a le même effet mais en faisant un display: hidden ?

Je vous remercie pour vos réponse

6 réponses


betaWeb
Réponse acceptée

La méthode jQuery fadeTo() prend une duration en premier paramètre, il te faut l'utiliser :

var.fadeTo(1500, 0, function () {
    console.log('hidden');
    var
        .html(arr[var2])
        .fadeTo(1500, 1, function () {
            console.log('Shown');
        });
})

ben en css :)

$('.selector').css("display","hidden")
Krokilex
Auteur

merci de ta reponse, mais je me rend compte que je ne suis pas allé au bout de mon problème.
Le tout est de faire disparaitre l'element puis de le faire reaparaitre avec un transition. Le probleme du css c'est que je ne peux pas faire de fadeIn() sur l'element, et l'operation inverse du display hidden ne peux pas prendre de transition si je ne me trompe pas ?

Salut,

En CSS, on ne peut, à ma connaissance, pas animer une transition vers ou à partir d'un display: none;. Il te faut donc passer par JavaScript, et la lib jQuery s'avère être pratique dans ce cas là. Tu peux donc te tourner vers la méthode fadeToggle() ;)
Concernant ta question : la propriété CSS display ne dispose pas de paramètre hidden. Si tu souhaites uniquement jouer sur l'opacité, alors tu peux sois le faire via CSS (opacity: <valeur>;) soit via JavaScript (element.style.opacity = '<valeur>'). Pour animer le tout, en CSS tu as les transitions, et avec le JS, tu peux utiliser la méthode fadeTo() de jQuery ;)

J'espère avoir répondu à tes questions, si tu as besoin tu peux demander ;)

Krokilex
Auteur

Merci de ta reponse

var.fadeOut(1500).html(arr[var2]).fadeIn(1500)

voici ce que cherche a faire. Cette maniere permet de faire une transition au changement de contenu mais ce qu'il se passe c'est que tout mes blocs autour de mon texte que je veux changer, change de postion jusqu'a ce que mon texte reapraisse car le fadeOut() comme le hide() fonctionne sur le display: none. Du coup l'opacité me semble etre une bonne idée mais comment est-ce que je peux faire pour la faire descendre progressivement 1 à 0 et inversement de 0 à 1 ?

Krokilex
Auteur

Merci de ton aide