Question

6

How do I animate a scale css property using jquery?

rated 0 times [ 12] [ 6] / answers: 1 / hits: 82124 / 8 Years ago, tue, february 16, 2016, 12:00:00

I am trying to have a circle div with the class of bubble to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size, but I am having trouble getting it to work. heres my code:

HTML
Show bubble
...
CSS

.bubble {

    transform: scale(0);

}

Javascript

 $('button').click(function(){

     $('.bubble').animate({transform: scale(1)}, 5000, 'linear');

 });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nikoguym

Add To Favorites

Follow

Total Points: 339

Total Questions: 106

Total Answers: 95

Location: Mali

Member since Sat, Feb 12, 2022

2 Years ago

answered 9 Years ago mari · Accepted Answer

You can perform the transition using CSS and then just use Javascript as the 'switch' which adds the class to start the animation. Try this:

$('button').click(function() {

  $('.bubble').toggleClass('animate');

})

.bubble {

  transform: scale(0);

  width: 250px;

  height: 250px;

  border-radius: 50%;

  background-color: #C00;

  transition: all 5s;

}



.bubble.animate {

  transform: scale(1);

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>

<button>Toggle</button>

<div class='col-lg-2 col-md-2 well bubble'></div>