0

I'm looking for the best way to ease-in/fade elements on page load.

I really like how it looks on http://alpha.musicinfo.fi/ when you do a search and the contents kinda slide/fade in.

was wondering how they are achieving it as it's working pretty slick across browsers and mobile.

Thanks!

3
  • Please, edit your question and add a code of what you tried. Aug 16, 2013 at 15:47
  • I haven't started coding it yet, looking for best approach advice ;-) Aug 16, 2013 at 15:49
  • set CSS to display:none; than with with jQuery: $('#slider').fadeTo(900, 1); and all that on window.load Aug 16, 2013 at 15:50

3 Answers 3

1

For the simplest animation, you'll want to use CSS3 transitions, which are supported on everything except opera mobile.

transition: top 0.2s ease-in, opacity 0.2s ease-in
-webkit-transition: top 0.2s ease-in, opacity 0.2s ease-in
opacity: 0.0;
position: relative;
top: 20px;

And then with javascript or jQuery you can set the new state on load.

$('#element').css({opacity: 1.0, top: '0px'})

But for the most flexibility and control, you'll want to use jQuery's .animate() function. Then you can do something like $('#element').animate({ opacity: '1.0', top: '0px' }, 200)

Have the default CSS set to opacity: 0; top: 20px; position: relative;

0

CSS3 animation is probably the easiest and way to accomplish this, but it is not very well supported. I think your most realistic option, balancing ease of implementation and browser support, would be using the jQuery's .fadeIn() function.

0

Here's another method using jQuery's addClass function.

The example is kind of ugly, but it you get the idea. Also to smooth things out use CSS3 transitions like transition etc.

Also add more than one class to change to collapse the box. This is just another method, maybe not the best, but still another way.

Here's the fiddle: http://jsfiddle.net/GrsXx/

Not the answer you're looking for? Browse other questions tagged or ask your own question.