javascript - animated 'show' without jQuery -


I want to do some animation on this latest website I'm working on Ii. In fact, I need one or two devices / paragraphs, on which show / hide the radio button on the set or checkbox (then, if the radio / check value is A, show div / p on the basis of onClick event, if it is b Then hide it)

The thing is, if I want JavaScript-ify on all that particular website, then jQuery looks like a slight downgrade (even minified version)

Is anyone simple [I can not do enough] This van The is the way to do this with javascript or some other minimal library [I usually do something else for events and little animation & lt; Looking for 2kB

Any ideas?

Thank you!

Edit : Thanks to everyone, I realized, though some things can be accomplished through smart HTML + JS, show / hide the right divisions The rules are so complex that it has a value of 30kb in which jQuery's (and even if it is already cached with the CDN), then I would have to be with JQuery 'Cheers for everyone :)

Edit: Follow JS + CSS3 transition This works :)

The only thing is this: If the height was not set previously (dynamic), the first time you set it, the background flick (from 0 pixel height).

I came with my own quick script. Nothing goes here:

  var animation phase = 10; // pixel var animationInternval = 100; // milliseconds window.onload = function () {var oDiv = document.getElementById ("div1"); ODiv.style.display = "block"; Var height = oDiv.clientHeight; ODiv.style.height = "0px"; Animate (odi, height); }; Function Animation (element, taskhit) {var curHeight = element.clientHyight; If (curHeight> gt; = targetHeight) is true; Element.style.height = (curHeight + animation step) + "px"; Window.setTimeout (function () {Animate (Element, TargetHit);}, Animation Interface); return false; }   

This will make the element "Atom" with ID Div1 and you can control the speed by playing with two numbers at the top: Big Stage means that every time a larger part is displayed and the smaller interval means faster animation.
This code needs to apply the following elements to the element:

  # div1 {display: none; Hidden flurry; }   

And the case of live test:

To get the "cooler" width, it should be very easy to animate (even at the same time also) effect. :)

Comments