Hi Russ,

That is normal, defaul opacity is 1, so if you did not set the
opacity, when you first set visibility, the element is visible, and
when scriptaculous begin effect, it sets it to (near) 0, nand effect
end with the value 1 for opacity ==> fully visible.

--
david

On 28 fév, 09:14, Russell <russell.pr...@au.knightfrank.com> wrote:
> Hi There,
>
> First off let me say I am new to all of this, so if I sound a bit lost
> it is because I am :)
>
> I am trying to use the Effect.Opacity event to fade in a div when a
> user clicks the link. As this DIV sits in the main page, it's default
> state is hidden, so when clicking the link the DIV's visibility is
> changed to visible, and the effect.opacity fades in from 0 to 1.
>
> It does work, but the problem is after the DIV is set to visible, it
> appears, then the fade from 0 to 1 occurs, so it appears on the page,
> disapears and fades in.
>
> If i set the opacity to 0 by default, the above issue doesnt occur,
> but once the fade in from 0 to 1 occurs, it then resets back to 0. The
> code I am using on the link is;
>
> <A HREF="#" onclick="javascript:new Effect.Opacity('page2', { from: 0,
> to: 1 }); return true">test</a>
>
> My CSS for that DIV is as follows, with this config the first issue
> occurs where the page appears, then disapears and fades in.
>
> div.page2
>                  {
>                  top: 50%;
>                  left: 50%;
>                  width: 900px;
>                  height: 600px;
>                  position:absolute;
>                  margin-left:-450px;
>                  margin-top: -300px;
>                  text-align:center;
>                  background-image:url('images/ladder.jpg');
>                  background-repeat:no-repeat;
>                  z-index:1;
>                          visibility:hidden
>                   }
>
> When the second issue occurs, fades in, then disapears, the CSS is as
> follows;
>
> div.page2
>                  {
>                  top: 50%;
>                  left: 50%;
>                  width: 900px;
>                  height: 600px;
>                  position:absolute;
>                  margin-left:-450px;
>                  margin-top: -300px;
>                  text-align:center;
>                  background-image:url('images/ladder.jpg');
>                  background-repeat:no-repeat;
>                  z-index:1;
>                                  visibility:hidden
>                  opacity:0;
>                  filter:alpha(opacity=0);;
>
> }
>
> Any help would be greatly appreciated!!!
>
> Thanks
>
> Russ
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to