web-dev-qa-db-fra.com

Montrer cacher div avec animation

J'ai fait ce script, qui ouvre une div avec la bonne classe et ferme les autres.

function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        var divs = document.getElementsByClassName("hideable");
        for (var i = 0; i < divs.length; i = i + 1) {
            divs[i].style.display = "none";
        }
        divid.style.display = "block";
    }
    return false;
}

Est-il possible de créer une animation, comme un fadout, un relâchement au lieu de simplement l'afficher à l'aide d'options d'affichage?

javascriptanimationhtmlshow-hide
7
user1632298

Tu pourrais essayer ça

function showhide(id) {
  if (document.getElementById) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName("hideable");
    for (var i = 0; i < divs.length; i = i + 1) {
      $(divs[i]).fadeOut("slow");
    }
    $(divid).fadeIn("slow");
  }
  return false;
}

Regardez ce violon " http://jsfiddle.net/9jtd3/ "

La bibliothèque Jquery propose de nombreuses autres techniques. Vous devriez également y jeter un coup d'œil.

7
yogi

Si vous utilisez Jquery, une autre façon de le faire est

function showhide(id) {
  $(".hideable".fadeOut("slow");
  $("#" + id).fadeIn("slow");
}

En supposant que "cachable" soit className dans votre groupe de div

Bonne chance.

1
Saju

Ceci va sûrement résoudre votre problème.

Vous pouvez utiliser directement .fadeOut () si vous avez inclus la bibliothèque jQuery dans votre script.

1
imVJ

Vous pouvez utiliser slideDown() and slidUp() de jQuery

$( document.body ).click(function () {
  if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).slideUp("slow");
  }
});
1
Arun Kasyakar

Vous pouvez le faire en utilisant une bibliothèque comme jQuery ou quelque chose comme ça.

Vous pouvez le faire en utilisant simplement du javascript, mais cela ne sert à rien, car jQuery est une bibliothèque étonnante.

Voir quelques exemples de show et hide

0
Felipe Fonseca

C'est beaucoup plus facile avec seulement CSS.

Vous faites un cours

div {
 display:block;
 transition: all .2s ease-out;
}

.hidden {
 display:none;
}

Et avec javascript, vous appliquez ou supprimez la classe masquée lorsque vous le souhaitez. jQuery animation lib est loin d’être utile. C'est maladroit, et ressource mangeant pour votre utilisateur. CSS utilise plutôt votre GPU, ce qui permet une animation plus fluide.

0
codedude