web-dev-qa-db-fra.com

Faire glisser l'animation de l'affichage: aucune à afficher: bloquer?

Existe-t-il un moyen d'animer l'affichage: aucun à afficher: bloquer en utilisant CSS pour que le div caché glisse vers le bas au lieu d'apparaître brusquement, ou devrais-je procéder différemment?

HTML:

<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

CSS:

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

Et voici mon script:

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});

Et un JSFiddle

javascriptjqueryhtmlcsscss-transitions
19
APAD1

Oui, il existe un moyen: http://jsfiddle.net/6C42Q/12/

En utilisant des transitions CSS3 et en manipulant la hauteur, plutôt que d'afficher la propriété:

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

Plus ici: Slide down div on click Pure CSS?

25
sinisake

Puisque vous utilisez déjà jQuery, la chose la plus simple est simplement d'utiliser slideDown (). http://api.jquery.com/slidedown/

Il y a aussi slideToggle ().

Ensuite, vous n'avez pas besoin de faire manuellement tous les css de transition spécifiques au navigateur.

8
bhamlin

J'aime l'idée des transitions CSS, mais c'est toujours très nerveux. Parfois, la hauteur maximale doit être définie sur un nombre très élevé en raison du contenu dynamique qui rend la transition inutile car elle est très agitée. Je suis donc retourné à jQuery, mais il avait ses propres défauts. les éléments en ligne sont nerveux.

J'ai trouvé que cela fonctionnait pour moi:

$(this).find('.p').stop().css('display','block').hide().slideDown();

L'arrêt arrête toutes les transitions précédentes. Le CSS s'assure qu'il est traité comme un élément de bloc même s'il ne l'est pas. La peau cache cet élément, mais jquery s'en souviendra comme élément de bloc. et enfin le slideDown montre l'élément en le faisant glisser vers le bas.

4
Webmaster G

Qu'en est-il de

$("#yourdiv").animate({height: 'toggle'});

Toggle activera/désactivera votre div, et l'animation devrait la faire apparaître par le bas. Dans ce scénario, vous n'avez pas besoin du CSS spécifique pour le "masquer".

3
Martin

Vous pouvez également utiliser

$('#youDiv').slideDown('fast');

ou vous pouvez dire que le div actif monte alors celui appelé descend

$('.yourclick').click(function(e) {
       var gett = $(this).(ID);
       $('.youractiveDiv').slideUp('fast', function(){
        $('.'+gett).slideDown(300);
       });
});

Quelque chose comme ca.

0
Rodrigo Zuluaga