SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Addict richtestani's Avatar
    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'});
    	}
    
    }
    The effect works like it should however there is a quick flash of the image before the elements disappear and then fade back in. How can I prevent this?

    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.
    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  2. #2
    Google Engineer polvero's Avatar
    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 */
    }

  3. #3
    SitePoint Zealot
    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.

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    K maybe you didnt quite get this, but you can use display: none but you have to attach it to the element itself, don't put it in the CSS

    ex. <div style="display:none">

  5. #5
    Google Engineer polvero's Avatar
    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.

  6. #6
    SitePoint Addict richtestani's Avatar
    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
    	
    	}
    	
    	);
    	
    
    
    }
    and applied the opacity rule to my elements:

    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&#37; Georgia, "Times New Roman", Times, serif;
    	position: relative;
    	margin-left: 450px;
    	margin-right: 10px;
    	top: 80px;
    	text-align: right;
    	opacity: 0;
    }
    Not sure why that would be happening.
    Thanks
    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  7. #7
    Google Engineer polvero's Avatar
    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);
    }

  8. #8
    SitePoint Addict richtestani's Avatar
    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
    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by richtestani View Post
    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
    Rich

    I belive it's just the way scriptaculous does things. I've never been able to find any proof to the contrary.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •