Animate de jQuery pourcentage de la hauteur de

Quand je suis en train d'animer pourcentage, ce n'est pas l'animation, mais élargir à l'ensemble de la hauteur instantanément. Je le veux pour augmenter à 100%, mais en douceur

CSS:

#block-views{
overflow:hidden;
height:20px;
}

HTML:

<div id="block-views">
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
    8<br/>
    9<br/>
    10<br/>
</div>
<a href="#" class="loadmore">Load more</a>

Jquery code:

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).animate({
                height: "20px",
            }, 1000 );
        },
        function() {
            $( "#block-views" ).animate({
                height: "100%",
            }, 1000 );
        }

    );
});

Quand je clique sur charger plus, il se dilate à 100% instantanément, pas en douceur, mais quand je clique une deuxième fois, il diminue la taille de 20 px en douceur. J'ai essayé de regarder l'expansion de processus dans google Chrome, inspecteur de l'outil et je peux clairement voir que le pourcentage est de l'ajout de douceur, mais les chiffres ne sont pas des entiers, et Chrome ne semble pas le reconnaître. Comment puis-je résoudre ce problème?

essayez de changer height: "100%" à height: $(this).parent().height(). jQuery est un moment difficile la comparaison de pourcentages et de pixels, de sorte que vous devriez faire à la fois du calcul en pixels.

OriginalL'auteur George | 2012-08-03

1

Je pense que le CSS valeur en pourcentage sur le nœud parent.

donc, si vous voulez rendre cela possible vous souhaitez ajouter des div nœud parent et régler la hauteur hors le nœud parent que je prends un exemple jsFiddle

aaargh. n'est pas workin jQuery v1.11. La façon la bascule est demandée est différente

OriginalL'auteur whytobe
0

Je suggère ce post à partir du JQuery forums serait adapté à vos besoins.

http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div

OriginalL'auteur Ryan McDonough
0

Je suis sûr que ce n'est pas légal. Vous ne pouvez pas mélanger px et un pour cent, il n'a aucun moyen pour convertir entre eux.

Merci cpt. évident. Je suis sûr que SA question & réponds - je suis absent la réponse.

OriginalL'auteur Ariel

Il y a deux façons de venir à mon esprit.

Première façon est votre chemin, je trouve un virgule , erreur ici: et ont besoin d'utiliser position:aboslute; propriété css. et dernière chose, changer vos principales fonctions de réponse de l'ordre.

Voici de travail jsFiddle.

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).stop().animate({
                height: "20px"//if you wont use another animate property; dont use comma here
            }, 1000 );
        },
        function() {
            $( "#block-views" ).stop().animate({
                height: "100%"
            }, 1000 );
        }

    );
});

Structure est comme ça = .animer( propriétés [, durée] [, assouplissement] [, compléter] )

plusieurs animer la fonction devrait être comme ceci: .animate({'height':'20px','width':'20px'},1000);

------------------------------------------------------------

Deuxième façon, c'est ma façon, vous pouvez ajouter +20px de hauteur pour chaque clic:

Voici jsFiddle

$(function() {
    $( ".loadmore" ).click(function() {
        $("#block-views").animate({'height':'+=20px'},1000);
    });
});

OriginalL'auteur Barlas Apaydin

0

J'ai trouvé une solution pour ce problème (désolé pour le retard). Ce que vous devez faire est de faire d'autres wrapper à l'intérieur de #bloc-vues élément, qui aura hauteur réelle de l'information:
```
<div id="block-views"> //height is 20px now
 <div class="wrapper"> //has its full height in px
  1<br/>
  2<br/>
  3<br/>
  4<br/>
  5<br/>
  6<br/>
  7<br/>
  8<br/>
  9<br/>
  10<br/>
 </div>
</div>
```
Maintenant en javascript, vous pouvez passer .wrapper hauteur de animate() fonction:
```
$('#block-news').stop().animate({'height': $('#block-news .wrapper').height()}, 1000);
```
A fonctionné pour moi. Pour basculer vous pouvez ajouter de nouvelles variables et de les stocker hauteur initiale (20px).

OriginalL'auteur Артур Пипченко

Vous devez vous connecter pour publier un commentaire.