Comment animer “visibility: hidden”?

voici mon problème... Pouvez-vous m'aider s'il vous plaît?

$(".button").hover(function(){
  $('.class').css({opacity: 1.0, visibility: "hidden"}).animate({opacity: 0}, 1200);
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

Il ne s'anime quand il apparaît. 🙁

  • Pourquoi diable êtes-vous de le faire avec jquery? C'est une simple transition CSS. Nulle raison de les utiliser jquery pour un bouton sensitif.
  • Les réponses à cette question, il est très évident que nous devrions nous attendre à voir BEAUCOUP de l'inefficacité de jQuery dans la nature. @AmmarCSE réponse est ce que vous voulez dans la production (bien que les autres peuvent vous apprendre quelque chose à propos de jQuery comportement).
  • Non, dans la production de votre voulez un CSS en fonction de la solution, comme présenté dans ma réponse.
  • Ah, bon appel, même si, en toute équité votre réponse n'était pas publié à l'époque. Ce que j'aurais dit, c'est "regardez assez dur pour les méthodes jQuery pour faire ce que vous voulez avant d'inventer votre propre" (ce qui améliore votre jQuery compétences trop). Vous êtes tout à fait exact de dire déclaratif solution basée sur le CSS qui n'implique pas de Javascript. Merci
  • J'ai oublié aussi: OP veut fadein/out d'un autre élément .class lorsque le curseur de .button.
  • yep, j'ai édité ma réponse à montrer comment cela peut être fait avec des transitions encore, d'une manière qui est sans doute plus propre, mieux séparés et plus efficace que d'utiliser des fonctions jquery 🙂

InformationsquelleAutor Ondřej Moldan | 2015-06-07
  1. 4

    Essayer de cette façon:

    $(".button").hover(function(){
  $('.class').css("opacity", "1.0").animate({opacity: 0}, 1200, function(){
    $('.class').css("visibility", "hidden");
});
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});

    Cependant, ce n'est pas la meilleure option pour fadeIn et fadeOut. Vous pouvez utiliser à la place les méthodes avec les noms que jQuery fournir, ou mieux, utiliser les transitions CSS dans le cas où vous le pouvez.

    InformationsquelleAutor lmgonzalves
  2. 1
    $(".button").hover(function(){
    $('.class').css({opacity: 1.0, visibility: "visible"}).animate( //start off from opacity 1 and visibile
        {opacity: 0}, //then animate opacity to 0
        1200, 
        function(){ //this will be run after the animation is completed
            $(this).css({
                visiblity:"hidden" //so it will be hidden only after the animation has completed
            });
        }
    );
},function(){
  $('.class').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 1200);
});
    InformationsquelleAutor Okku
  3. 1

    La propriété de visibilité dans le CSS est un Booléen, soit sur on ou off.

    Pour toute animation de travailler, si c'est fait avec des images clés, des transitions ou jquery, le point de départ et le point final de la valeur de la propriété doivent être décomposé en un ensemble d'étapes, avec un plus grand nombre d'étapes résultant en une animation plus fluide.

    Pour un effet simple comme ça, un transition est le meilleur, veuillez voir le violon ici. L'utilisation de javascript pour ajouter /supprimer des classes de déclenchement de la transition

    .hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.show-me {
    opacity: 1;
}

    Vous définissez la propriété transition définissant la propriété de transition, la longueur, la facilité de la fonction à utiliser (ce qui explique les modifications apportées à la vitesse à laquelle l'animation a d'effet). Vous devez également définir le point de départ et le point final de votre propriété animée comme vous pouvez le voir avec les deux valeurs d'opacité.

    Pour l'enregistrement d'une image clé est appropriée si votre effet est plus complexe, comme de vouloir une propriété entièrement animé de la moitié du chemin et de l'animer arrière et une autre de prendre le temps, ou pour des oscillations; et JQuery animate fournit un moyen facile de loi relative à la conclusion d'une animation, qui est aussi parfois nécessaire.

    • J'ai oublié aussi: OP veut fadein/out d'un autre élément .class lorsque le curseur de .button.
    InformationsquelleAutor Toni Leigh
  4. 0

    Utilisation fadeIn/fadeOut

    $(".button").hover(function(){
  $('.class').fadeOut(1200);
},function(){
  $('.class').fadeIn(1200);
});

    Vous pouvez passer en duration qui devrait atteindre vos objectifs

    • c'est pour display:none vs display:block
    InformationsquelleAutor AmmarCSE
  5. 0

    C'est parce qu'il est enlevé avant le cam animer. Vous devez animer le fade out d'abord, puis appliquer visibility: hidden une fois l'animation terminée.

    Il ya un couple de façons de le faire: Le navigateur génère un événement animationend (c'est prexied pour les différents navigateurs, voir ici pour plus d'infos) ou vous pouvez utiliser une meilleure animation de la bibliothèque de jQuery animate (comme les Verts Chaussette TweenLite -- http://greensock.com/tweenlite) pour gérer votre animation, ce qui en fait trivial d'exécuter du code à la fin de l'animation.

    InformationsquelleAutor Jeff Clarke