jQuery ajouter une animation lors du changement de CSS hauteur de propriété

J'espère que vous êtes tous avoir un grand jour

Je tiens à ajouter de l'animation à ce morceau de code. J'ai essayé d'utiliser animate() . Mais il ne fonctionne pas, c'est peut-être en raison de l'absence de mes connaissances en javascript.

S'il vous plaît dites-moi si c'est possible, avec ce code, ou dois-je besoin d'essayer quelque chose d'autre? que proposez-vous?

Je vous remercie beaucoup à l'avance.

Voici le code HTML:

<div id="description_wrapper">
    Text content.<br/>
    See; More Text content.
</div>

<button class="learn_more" id="lm_more" href="#">Learn more</button>

Le CSS

#description_wrapper
{
    margin: 0 auto;
    margin-top: 25px;
    height: 0;
    overflow: hidden;
}

Le jQuery

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') > '1px') {
        $('#description_wrapper').css({'height': '0px'});
        $('#lm_more').html('Learn More');
    }
    else
    {
        $('#description_wrapper').css({'height': 'auto'});
        $('#lm_more').html('Learn less');
    }
});

Afficher le code ici http://jsfiddle.net/Gbspx/11/

jQuery seulement anime chiffres réels, il ne comprend pas "automatique", si c'est ce que vous avez essayé d'animer ?
Vous pourriez utiliser des transitions CSS3 pour animer auto si c'est ce que vous essayez d'animer
jsfiddle.net/Gbspx/16

OriginalL'auteur Bilal Khoukhi | 2013-06-14

Vous pouvez utiliser certaines Transitions CSS3 pour faire cela très facilement et en douceur. Mettez votre CSS:

#description_wrapper
{
margin-top: 25px;
height: 0;
overflow: hidden;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}

Aussi, vous aurez besoin de donner de la hauteur à une hauteur spécifiée au lieu de "auto" pour la transition à prendre effet.

$('#lm_more').click(function(event){
event.preventDefault();
if($('#description_wrapper').css('height') > '1px') {
    $('#description_wrapper').css({'height': '0px'});
    $('#lm_more').html('Learn More');
}
else {
    $('#description_wrapper').css({'height': '200'});
    $('#lm_more').html('Learn less');
}

});

JS Fiddle

Notez que cela ne fonctionne que sur les navigateurs qui prennent en charge CSS3.

Exactement, j'ai essayé, mais le problème est que je veux est à la hauteur de "auto" au lieu d'avoir une hauteur spécifique.

OriginalL'auteur Derek Story

3

Prendre un coup d'oeil à .slideToggle(), je pense que c'est ce que vous cherchez.

exactement!! Frère, vous êtes grand!

OriginalL'auteur Jérôme

Cela fonctionne glisse vers le haut, mais comme la première réponse que vous devez utiliser slidetoggle. Il est un meilleur choix. Ou ne addClass.

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') > '1px') {
        $('#description_wrapper').animate({height : '0px'}, 1000);
        $('#lm_more').html('Learn More');
    }
    else {
        $('#description_wrapper').animate({height : '100%'},  1500);
        $('#lm_more').html('Learn less');
    }
});

OriginalL'auteur Cam

J'ai trouvé une très bonne solution, et je ne peux toujours utiliser l'auto...
Pour moi, l'auto est très important, surtout lorsque vous utilisez le bouton pour faire plus d'un div apparaissent

La solution est:

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') != '0px') {
        $('#description_wrapper').animate({'height': '0px'}, 1000, "easeInQuint");
        $('#lm_more').html('Learn More');
    }
    else {
        var height_div = $('#description_wrapper').css({'height': 'auto'}).height();
        $('#description_wrapper').animate({'height': height_div}, 1000, "easeInQuint");
        $('#lm_more').html('Learn less');
    }
});

J'ai d'abord pour calculer la hauteur souhaitée, puis je le passe à la fonction animate.

Merci à vous tous

OriginalL'auteur Bilal Khoukhi

essayez ceci:

$('#lm_more').click(function (event) {
        event.preventDefault();
        $('#description_wrapper').slideToggle('slow', function (){
            if ($('#lm_more').text() == 'Learn more') {
                $('#lm_more').text('Learn less');
            } else {
                $('#lm_more').text('Learn more');
            }
        });
    });

OriginalL'auteur NullHappens

J'ai ajouté une bonne solution. ici vous pouvez trouver dynamique de la hauteur de contenu, puis ajouter de la hauteur avec effet de transition sur le bouton et cliquez sur la fenêtre de l'événement de redimensionnement.

$(document).ready(function() {
            var divheight = document.getElementById('experience-county-toggle').offsetHeight;
            $("#experience-county-toggle").css('height', 0);
            $(".toggle-arrow-icon").click(function() {

                $(window).resize(function() {
                    $("#experience-county-toggle").removeClass('height-zero');
                    $("#experience-county-toggle").animate({
                        height: divheight
                    }, 1);
                    var $heightfirst = $('#experience-county-toggle').height();
                    if ($heightfirst > 0) {
                        $("#experience-county-toggle").addClass('height-zero');

                    }

                });
                $(window).trigger('resize');
            });

OriginalL'auteur Patel Disha

Vous devez vous connecter pour publier un commentaire.