Menu
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'); }); 
496
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
The animate( ) method performs a custom animation of a set of CSS properties.
jQuery was not created for animating objects, so it may be slow and laggy (depending on what and how much you're animating). But scrolling a page with jQuery 's . animate() function for example works very good in most cases.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
