How to Animate a DIV From Display None to Block in prototypejs

Question

I need to display a div from display:none to display:block giving it a fade effect. How can I do this in prototypejs? Thanks.

<div id="fadeId" style="display:none">
</div>

Answer 1

You can use Jquery for this

$("#fadeId").fadeIn(slow);

Answer 2

There is no method to do that with prototypejs out of the box.

If you're looking for a simple method to do just that, you should take a look at scriptaculous. This is an UI framework built on prototypejs, and from what I know, it's what every prototypejs's user uses.

Here is some example:

// Fade-in
Effect.Appear('fadeId', {duration: 2}); // the duration parameter is optional

// Toggle fadein/fadeout
Effect.Toggle('fadeId', 'appear');

I don't mention the way to do it all the way because it would be too much code (and is out of the scope of this question). For a simple animation library, I suggest you take a look at $fx

Answer 3

i see that i am late to the party here, but you can do it with a custom function and a timer.

function animate() {
  var element = $('fadeId');
  var opacity = element.getOpacity() + 0.1;
  element.setStyle({'display': 'block', 'opacity': opacity});
  if(opacity < 1) {
    setTimeout(animate, 100);
  }
}
function doshow() {
  var element = $('fadeId');
  element.setStyle({'display': 'block', 'opacity': 0.0});
  setTimeout(animate, 100);
}
$('show').on('click', doshow);

see the fiddle at http://jsfiddle.net/ApzhJ/

to fade in and fade out, check out fiddle http://jsfiddle.net/Y5CB9/