SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Dec 3, 2007, 10:00 #1
- Join Date
- Nov 2003
- Location
- Bridgeport
- Posts
- 292
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Avoiding flash of image before fade in
Hi -
Im using Prototype/Scriptaculous frameworks for this site I am building.
On the homepage, I am fading in some elements to add a little presentation.
The script I wrote looks like:
Code:<body id="article" onload="fadeIn('home', 'tagline
Code:function fadeIn(el1, el2) { $(el1).hide(); $(el2).hide(); if($(el1)) { Effect.Appear(el1,{duration:1.5,queue:'end'}); } if($(el2)) { Effect.Appear(el2,{duration:2.5,queue:'end'}); } }
My CSS doesn't apply any hiding of elements, but when I do, the effect does not work. I am not 100% sure how scriptaculous makes its elements appear, either with the visibility rule or display.
Thanks.
RichRichTestani
-------------------------------
http://www.junkdepot.com
http://www.rareoopdvds.com | The Movie Poster Site
-
Dec 3, 2007, 14:22 #2
- Join Date
- Oct 2003
- Location
- Mountain View
- Posts
- 567
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
don't hide it with display. Simply set it's default state to opacity: 0
Code:#example { opacity: 0; filter: alpha(opacity=0); /* IE */ }
./with Imagination: Dustin Diaz
Buy my book: Pro JavaScript Design Patterns
DOM Scripting Basics
Guard the Homeless
-
Dec 3, 2007, 16:38 #3
- Join Date
- Sep 2007
- Posts
- 136
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
http://wiki.script.aculo.us/scriptac.../Effect.Appear
If the element was previously set to display:none; inside the style attribute of the element, the effect will automatically show the element. This means that display must be set within the style attribute of an object, and not in the CSS in the head of the document or a linked file. In other words, this Effect will not work if display:none; is set within style tag or linked CSS file.
-
Dec 3, 2007, 16:44 #4
- Join Date
- Oct 2003
- Location
- Mountain View
- Posts
- 567
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Exactly, you can't fade an element that isn't displayed. That, hence, is the reason it should be displayed, but with zero opacity.
./with Imagination: Dustin Diaz
Buy my book: Pro JavaScript Design Patterns
DOM Scripting Basics
Guard the Homeless
-
Dec 4, 2007, 11:03 #5
- Join Date
- Nov 2003
- Location
- Bridgeport
- Posts
- 292
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the help guys, this all makes sense - but after adding an opacity rule, the Appear effect works fine, but returns to zero opacity after the effect is done. I've updated my script to simply fade in 2 of the elements together.
Code:function fadeIn(el1, el2, el3) { new Effect.Parallel( [ new Effect.Appear(el1,{sync: true}), new Effect.Appear(el2,{sync: true}) ], { duration: 1.8 } ); }
Code:#content #home { position: relative; height: 468px; width: 897px; background: url(building.jpg) no-repeat -190px 10px; z-index: 1; opacity: 0; } h1#tagline, h2#tagline2 { font: 170% Georgia, "Times New Roman", Times, serif; position: relative; margin-left: 450px; margin-right: 10px; top: 80px; text-align: right; opacity: 0; }
Thanks
RichRichTestani
-------------------------------
http://www.junkdepot.com
http://www.rareoopdvds.com | The Movie Poster Site
-
Dec 4, 2007, 15:45 #6
- Join Date
- Sep 2007
- Posts
- 136
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Dec 4, 2007, 15:49 #7
- Join Date
- Oct 2003
- Location
- Mountain View
- Posts
- 567
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
also, don't forget the filter for IE -again-
Code:element { filter: alpha(opacity=0); }
./with Imagination: Dustin Diaz
Buy my book: Pro JavaScript Design Patterns
DOM Scripting Basics
Guard the Homeless
-
Dec 5, 2007, 10:34 #8
- Join Date
- Nov 2003
- Location
- Bridgeport
- Posts
- 292
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I see, I got it now and it works.
Why does this work only with inline styles and not external?
Is this to do with specificity?
Thanks guys for your help on this.
Dustin, great blog and screencasts!
Thanks
RichRichTestani
-------------------------------
http://www.junkdepot.com
http://www.rareoopdvds.com | The Movie Poster Site
-
Dec 8, 2007, 16:54 #9
- Join Date
- Sep 2007
- Posts
- 136
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks