Fade out div over the whole site to (simulate) do a preloader with (Mootools) Jquery.

I made a page, 3 cols, tableless and css formated (as it should be). Sometimes the browser doesn't put anything in its place. So I made a fake preloader in a DIV id="preloader" and a content wrapper in another DIV id="container". First I made the whole wrapper nonexistant (not there, in opposite to visibility, that just "hides"). CSS #container {display: none} #preloader {display: block} Then, with mootools, I changed their values just when the whole doc was loaded, so when the container becomes visible (block) it is ready as a whole to be skinned by the CSS (images and everything included). SCRIPT window.addEvent('load',function() { $$('div#preloader').setStyle('display','none'); $$('div#container').setStyle('display','block'); }); So far so good. But as I couldn't feel happy there, I wanted to add some spice to the solution. I decided to use a fade out effect for the preloader div, or a fade in effect for the container. I thought that maybe the container has too many things inside and the fade in effect could turn into a "not so cool" effect, so I chose the preloader div to do the fade out over the container div. Then became the troubles. I'm not a programmer, I'm a graphic designer, and even when I'm pretty good at unveiling code and shaping to my evil urges, this time I failed to understand much from the mootools documents (I find them the worst detailed and example lacking tutorials of all time), I finally came to this: window.addEvent('load', function() { $$('div#container').setStyle('display','block'); $$('div#preloader').fade('out'); $$('div#preloader').setStyle('display','none'); }); This works! But I need to give the preloader more time to fade so the animation runs smoothly. Indeed, that's the problem. I just had the feeling that I needed some var=myFade to be created and then give to it the parameter of duration but, I dig a lot and found nothing, specially when the instructions are for buttons clicks. I'm asking you guys to help me sort this thing out. It'd be much apreciatted.
Perhaps you can clarify the example with an html + css snippet that shows what doesn't work, so we can test?

以上就是Fade out div over the whole site to (simulate) do a preloader with (Mootools) Jquery.的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准