Comment animer une échelle propriété css à l'aide de jquery?

Je suis en train d'avoir un cercle de div avec la classe de "bulle" à la pop lorsque l'on clique sur un bouton à l'aide de jQuery. Je veux la faire apparaître à partir de rien et se développer à sa pleine taille, mais j'ai de la difficulté à la faire fonctionner. voilà mon code:

HTML
Montrer bulle
...
CSS

.bubble {
    transform: scale(0);
}

Javascript

 $('button').click(function(){
     $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
 });
Quand voulez-vous à l'échelle de l'élément? sur le vol stationnaire , au chargement de la page ou quelque chose d'autre? veuillez clairement à votre question.
Vous ne pouvez animer des propriétés numériques à l'aide de jq animate() méthode. Votre meilleur pari est de basculer d'une classe, la manipulation de la transition CSS

OriginalL'auteur Weylin Wagnon | 2016-02-16

  1. 3

    Mieux d'aller avec des Animations CSS3. Pour l'animation à intervalle fréquent que vous pouvez utiliser avec un navigateur supportant les préfixes(-webkit,-moz,etc.)-

    @keyframes fullScale{
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}
.bubble:hover{
    animation: fullScale 5s;
}

    Consulter ce lien
    http://www.w3schools.com/css/css3_animations.asp

    Ou la solution ci-dessus par @Rory est également un bon moyen de addclass sur un événement attaché.

    OriginalL'auteur Himanshu Aggarwal

  2. 2

    Vous pouvez utiliser Velocity.js.
    http://velocityjs.org/
    Par exemple:

    $("div").velocity({
  "opacity" : 0,
  "scale" : 0.0001
},1800)

    OriginalL'auteur shu