Avoiding flash of image before fade in

**richtestani** · Dec 3, 2007, 10:00

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

**polvero** · Dec 3, 2007, 14:22

don't hide it with display. Simply set it's default state to opacity: 0

Code:

#example {
  opacity: 0;
  filter: alpha(opacity=0); /* IE */
}

**gimbles** · Dec 3, 2007, 16:38

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.

**polvero** · Dec 3, 2007, 16:44

Exactly, you can't fade an element that isn't displayed. That, hence, is the reason it should be displayed, but with zero opacity.

**richtestani** · Dec 4, 2007, 11:03

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

**gimbles** · Dec 4, 2007, 15:45

Originally Posted by gimbles

http://wiki.script.aculo.us/scriptac.../Effect.Appear

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">

**polvero** · Dec 4, 2007, 15:49

also, don't forget the filter for IE -again-

Code:

element {
  filter: alpha(opacity=0);
}

**richtestani** · Dec 5, 2007, 10:34

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

**gimbles** · Dec 8, 2007, 16:54

Originally Posted by richtestani

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.

The SitePoint Forums have moved.

User Tag List

Thread: Avoiding flash of image before fade in

Thread Tools

Display

Avoiding flash of image before fade in

Bookmarks

Bookmarks

Posting Permissions