jquery fadein /fadeout a few divs in one place

[Martin]

Hi There,

I'm new to jquery. I'm trying to fadein/fadeout a few divs (each
containing some text). Basically the text from the first div
should appear on the screen, then it should fade out and the second
div should fadein in the same place, and so on.
I've found the following function on the internet:

This is my script.js:

function imageOneFade(){
$('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000);
imageTwoFade();",6000); });
}

function imageTwoFade(){
$('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000);
imageOneFade();",6000); });
}

and the relevant bit from index.html

$(document).ready(function(){
imageOneFade();
});

The css file hasn't got anything yet. I want to get this animation right
first.

Thank you

Martin

 

[Gregor Kofler]

Am 2011-02-07 22:28, Martin meinte:

Hi There,

I'm new to jquery. I'm trying to fadein/fadeout a few divs
[snip]

The css file hasn't got anything yet. I want to get this animation right
first.

And your question/problem is...?

Gregor

 

[Martin]

Am 2011-02-07 22:28, Martin meinte:

Hi There,

I'm new to jquery. I'm trying to fadein/fadeout a few divs
[snip]

The css file hasn't got anything yet. I want to get this animation right
first.

And your question/problem is...?

Gregor

Sorry, I didn't post the question It doesn't work like I'd like it to.
When the script starts only div1 should be visible (div2 - and later 3,4,5 -
should be invisible.)
When div1 fades out div2 should fadein in the same place,etc.
As it is, both divs are visible at the beginning. When div1 fades out,
div2 jumps up to div1's original position. That's not what I'd like to
achieve.

thank you
Martin

 

[Gregor Kofler]

Am 2011-02-07 23:06, Martin meinte:

Am 2011-02-07 22:28, Martin meinte:

Hi There,

I'm new to jquery. I'm trying to fadein/fadeout a few divs
[snip]

The css file hasn't got anything yet. I want to get this animation right
first.

And your question/problem is...?

Gregor

Sorry, I didn't post the question It doesn't work like I'd like it to.
When the script starts only div1 should be visible (div2 - and later 3,4,5 -
should be invisible.)
When div1 fades out div2 should fadein in the same place,etc.
As it is, both divs are visible at the beginning.

Perhaps an initial opacity of 0 needs to be set explicitly before the
fade starts.

When div1 fades out,

div2 jumps up to div1's original position.

I suppose once opacity reaches 0, the display property is set to "none",
thus making the following block element jump. (That's what my own fade
animation does.)

That's not what I'd like to

achieve.

Set the position of the divs to "absolute" or "relative" with according
top/left values, to make them overlap.

As far as jQuery's fadeIn() goes, all I can try is an educated guess.
There are explicit jQuery groups and formus out there. The latter
problem is pure CSS.

Gregor

 

[Martin]

Am 2011-02-07 23:06, Martin meinte:

Am 2011-02-07 22:28, Martin meinte:
Hi There,

I'm new to jquery. I'm trying to fadein/fadeout a few divs

[snip]

The css file hasn't got anything yet. I want to get this animation right
first.


And your question/problem is...?

Gregor

Sorry, I didn't post the question It doesn't work like I'd like it to.
When the script starts only div1 should be visible (div2 - and later 3,4,5 -
should be invisible.)
When div1 fades out div2 should fadein in the same place,etc.
As it is, both divs are visible at the beginning.

Perhaps an initial opacity of 0 needs to be set explicitly before the
fade starts.

Ok, I set the absolute position to both divs and the problem has been
partially solved. When the script starts both divs are visible in the
same place overlaping each other. So I guess it's just the question of
an initial opacity of the second div to be 0, as you suggested. How
would I do it? Sorry, I have been learning jquery for 2 days now so the
syntax is still alien to me.


thanks for you help

martin

 

[S.T.]

Hi There,

I'm new to jquery. I'm trying to fadein/fadeout a few divs (each
containing some text). Basically the text from the first div
should appear on the screen, then it should fade out and the second
div should fadein in the same place, and so on.
I've found the following function on the internet:

If you want the easy way out... I don't usually advocate third-party
plugins since the code can be awful in many of them, but the cycle
plugin was done by one of the jQuery developers and might fit your needs:

http://malsup.com/jquery/cycle/lite/

The 'lite' version is a modest 3K. If you want to use the other fancier
transitions and features the regular plugin size starts getting large in
a hurry (http://malsup.com/jquery/cycle/).

Quickie demo on div's with text rather than cycling images:
http://jsfiddle.net/CBvcE/1

 

[Martin]

If you want the easy way out... I don't usually advocate third-party
plugins since the code can be awful in many of them, but the cycle
plugin was done by one of the jQuery developers and might fit your needs:

http://malsup.com/jquery/cycle/lite/

The 'lite' version is a modest 3K. If you want to use the other fancier
transitions and features the regular plugin size starts getting large in
a hurry (http://malsup.com/jquery/cycle/).

Quickie demo on div's with text rather than cycling images:
http://jsfiddle.net/CBvcE/1

It looks nice and does exactly what I need, but I agree with you that using
third party plugins should be considered as the last resort.
Is there a way of fixing the script I included to achieve just this. I
don't need any other effects that the cycle plugin offers.
It doesn't actually has to be based on the code I posted.
Perhaps, there's another way of doing it using just jquery.

I think I read something about .hide or .hidden. Couldn't it be
used (if not opacity) to initially hide div2?

thank you in advance
martin

 

[Martin]

It looks nice and does exactly what I need, but I agree with you that using
third party plugins should be considered as the last resort.
Is there a way of fixing the script I included to achieve just this. I
don't need any other effects that the cycle plugin offers.
It doesn't actually has to be based on the code I posted.
Perhaps, there's another way of doing it using just jquery.

I think I read something about .hide or .hidden. Couldn't it be
used (if not opacity) to initially hide div2?

thank you in advance
martin

It *seems* I sorted it out with CSS. I added the property:
display: none;
to the css of div2 and it SEEMS to be working fine.

thanks all
martin

 

[S.T.]

3K (plus jQuery) to do a fading cycle effect with a few event triggers
seems like a lot to me.

If I knew exactly what I wanted I might do something like:
http://jsfiddle.net/Hv8Kk/

The plug-in approach provides quite a bit more customization to play
with however. Something to be said for that, particularly in a
prototyping role.

If you're suggesting it would be better to write all the required code
from scratch, playing games with CSS opacity rules versus IE filters and
other quirky junk - I'd disagree.

 

[Thomas 'PointedEars' Lahn]

Am 2011-02-07 23:06, Martin meinte:

I suppose once opacity reaches 0, the display property is set to
"none", thus making the following block element jump. (That's what
my own fade animation does.)

You might want to reconsider.


PointedEars

 

[Gregor Kofler]

Am 2011-02-08 22:49, Thomas 'PointedEars' Lahn meinte:

You might want to reconsider.

Reconsidering to set the display property to "none" once the opacity
reaches 0?

The fade effect is normally just a fancy replacement for a style.display
= ""/"none". Just setting the opacity to 0, but leaving the display
"on", would frequently result in unseeable (absolutely or relatively
positioned) elements blocking user interaction with elements underneath.
Setting style.display to "none" after the fade out finishes works for me
most of the time.

Gregor

 

[Thomas 'PointedEars' Lahn]

Am 2011-02-08 22:49, Thomas 'PointedEars' Lahn meinte:

Reconsidering to set the display property to "none" once the opacity
reaches 0?
Yes.

The fade effect is normally just a fancy replacement for a style.display
= ""/"none".

Who defines what is "normal"?

Just setting the opacity to 0, but leaving the display "on", would
frequently result in unseeable (absolutely or relatively positioned)
elements blocking user interaction with elements underneath. Setting
style.display to "none" after the fade out finishes works for me
most of the time.

But the opacity of an element has little to nothing to do with whether it is
rendered or not. Therefore, assignment to the `display' property SHOULD NOT
be part of the opacity animation in an distributed animation framework, at
least it should be only an option, disabled by default (YMMV). Indeed, it
is infinitely better to let the user of the framework decide, by defining
the keyframe properties, whether they want the element to stay rendered
after it has faded or not.

Consider, for example, an element that is fading out, and is supposed to
fade in again when its area or another key element receives the focus. One
does not want the UI making jumps then.


PointedEars

 

[Lasse Reichstein Nielsen]

Reconsidering to set the display property to "none" once the opacity
reaches 0?

It seems like an unrelated change.

At any opacity except 0%, the element is still there in the flow,
being rendered. The logical continuation from that is to also keep
the element there at 0% opacity, just not being visible.
The traditional setting corresponding to an invisible element that
still takes up space is visibility:hidden, not display:none.

On the other hand, the logical equivalent of an animation that reduces
an element's size to zero would be display:none.

The fade effect is normally just a fancy replacement for a style.display
= ""/"none".

That's where I disagree. It's a fancy replacement for visibility:hidden.

Just setting the opacity to 0, but leaving the display
"on", would frequently result in unseeable (absolutely or relatively
positioned) elements blocking user interaction with elements underneath.
Setting style.display to "none" after the fade out finishes works for me
most of the time.

"works ... most of the time" isn't that high a goal

/L

 

[Scott Sauyet]

Gregor Kofler writes:

That's where I disagree. It's a fancy replacement for visibility:hidden.

I think it depends on what one means by the "fade effect". When I use
it in the following manner, I really do mean display:none :

myAPI.hide(element, {effect: "fadeOut", duration: 400});

When I use it this way, obviously I don't want to hide the element:

myAPI.animate(element, {opacity: 0.1, duration: 400});

I can't think of any time when I want to animate the opacity all the
way down to 0 and still leave the element in the document flow.
Nonetheless, an API that doesn't allow for that, and make it
relatively easy, is probably flawed.

-- Scott

 

[Gregor Kofler]

Am 2011-02-09 07:08, Lasse Reichstein Nielsen meinte:

It seems like an unrelated change.

Whereas setting visibility is only "somewhat unrelated"?

At any opacity except 0%, the element is still there in the flow,
being rendered. The logical continuation from that is to also keep
the element there at 0% opacity, just not being visible.
The traditional setting corresponding to an invisible element that
still takes up space is visibility:hidden, not display:none.

On the other hand, the logical equivalent of an animation that reduces
an element's size to zero would be display:none.


That's where I disagree. It's a fancy replacement for visibility:hidden.

I normally hide elements with display:none and show them with
display:block|inline, since it is - more or less - only used for "popup"
widgets like date pickers, custom modal dialogs, suggest boxes, etc.
From a "semantical" standpoint visibility might be closer related to
opacity than display, from a practical standpoint I prefer setting display.

"works ... most of the time" isn't that high a goal

Well, I tried various versions: setting visibility, setting neither
visibility, nor display, setting display. Setting display worked out
best for me. I *know* that display is set to none once the effect ends.
If I really want to keep display on and just set visibility, I can add a
custom event listener fired when the effect finishes.

Gregor

 

[Gregor Kofler]

Am 2011-02-09 01:32, Thomas 'PointedEars' Lahn meinte:

Who defines what is "normal"?

With my scripts? _I_ do. (And I prefer setting display to none once the
effect finishes *and* opacity is set to 0.)

But the opacity of an element has little to nothing to do with whether it is
rendered or not. Therefore, assignment to the `display' property SHOULD NOT
be part of the opacity animation in an distributed animation framework, at
least it should be only an option, disabled by default (YMMV). Indeed, it
is infinitely better to let the user of the framework decide, by defining
the keyframe properties, whether they want the element to stay rendered
after it has faded or not.

Agreed. There is some sort of "backdoor": A custom event fires once the
effect finishes, and a listener could turn display on again. As stated
in my response to Lasse: I've tried various versions in my scripts and
found the solution with setting display to none the most practical one.

Consider, for example, an element that is fading out, and is supposed to
fade in again when its area or another key element receives the focus. One
does not want the UI making jumps then.

One could of course let it fade to an opacity of 0.001, but I agree this
is rather ugly. Another option would be a container element (which then
would need an explicitly set size) around the fading element (again not
pretty). Most likely I would then either add an optional parameter. I
haven't yet, since so far I had no need for it.

Gregor

 

[Gregor Kofler]

Am 2011-02-09 01:32, Thomas 'PointedEars' Lahn meinte:
Damn. My lenghty previous response got eaten by the NULL device... Ok,
another go.

Who defines what is "normal"?

Within my scripts I do.

But the opacity of an element has little to nothing to do with whether it is
rendered or not. Therefore, assignment to the `display' property SHOULD NOT
be part of the opacity animation in an distributed animation framework, at
least it should be only an option, disabled by default (YMMV). Indeed, it
is infinitely better to let the user of the framework decide, by defining
the keyframe properties, whether they want the element to stay rendered
after it has faded or not.

Consider, for example, an element that is fading out, and is supposed to
fade in again when its area or another key element receives the focus. One
does not want the UI making jumps then.

Indeed. There is currently a "backdoor": Since the effect fires a custom
event once it finishes, a listener could turn display on again.

Another option would be fading to an opacity of 0.001 (agreed, ugly). Or
a container element (with specified size) around the fading element (not
too pretty, again). I suppose if I came across such cases I would just
add an optional parameter for controlling display once the effect
finishes. But there was no need for that yet.

Gregor

 

[Lasse Reichstein Nielsen]

Am 2011-02-09 07:08, Lasse Reichstein Nielsen meinte:

I normally hide elements with display:none and show them with
display:block|inline, since it is - more or less - only used for "popup"
widgets like date pickers, custom modal dialogs, suggest boxes, etc.
From a "semantical" standpoint visibility might be closer related to
opacity than display, from a practical standpoint I prefer setting display.

I think my underlying reasoning is that if you make a nice looking
fade-out effect, it seems crude to just remove the entire element from
the flow afterwards and have things jump around. I would expect a nice
transition there too, moving the following elements into the empty
space.

/L

 

[Gregor Kofler]

Am 2011-02-09 19:05, Lasse Reichstein Nielsen meinte:

I think my underlying reasoning is that if you make a nice looking
fade-out effect, it seems crude to just remove the entire element from
the flow afterwards and have things jump around. I would expect a nice
transition there too, moving the following elements into the empty
space.

Ah, you mean a slide animation? Perhaps with a slight bounce? Modern
browsers add a fancy transformation? ;-)
Well, I could offer a fade out with a parallel roll or slide. This would
look okayish, I think.

Gregor

 

[David Mark]

It looks nice and does exactly what I need, but I agree with you that using
third party plugins should be considered as the last resort.

Using jQuery should be considered a last resort. The idea that you
should avoid third-party plug-ins for jQuery because of "bad code" is
silly considering jQuery's code quality (or lack thereof). In for a
penny...

And why would you want to script a fade effect these days? Just use
CSS3. Add conditional comments to script old versions of IE (or use
the proprietary DirectX styles). Everyone else gets a non-animated
DIV.

Or you can use a 70K CSS selector engine (jQuery) plus a plug-in to
render fade effects for lots of old browsers that jQuery can't support
anyway. As a "plus", jQuery is too large and slow to work on most
mobile devices. Some iPhones won't even cache the stupid thing (and
no, switching to an all-in-one-page site is not a solution).

You don't know how to do any of that? Sounds like you don't know how
to use jQuery either at this point, so...

And stop listening to "S.T." Nobody cares what he (she?) "advocates".