On Dec 31, 2007, at 5:40 AM, tetrix wrote:
thank you but it doesnt work, your code shows a row of 3 images that
fade out at the same time;
Then it actually DOES work -- at least for what we thought you were
trying to do. ;-)
from your earlier post:
this code works but i would like to do the same with 3 different
images
now, on to the clarified issue:
what i need is one image in place then this
image fades out to the second one and the third one:
the document i need:
<body>
<image>
</body>
your code:
<body>
<image><image><image>
</body>
So, you want image 1 to be visible on page load, then fade out to
reveal image 2; then, image 2 should fade out to reveal image 3? Do
you want image 2 and 3 to fade in when they become visible or just
appear immediately? If fade in, do you want that to occur at the same
time that the previous one is fading out, or only after the previous
has completely disappeared? And what do you want to happen after image
3 has appeared? Should it stay visible, or do you want it to fade out
over a period of 4 seconds, just as the others do? Or, do you want it
to cycle back to image 1? (If you'd like it to cycle back, check out
the excellent Cycle Plugin: http://plugins.jquery.com/project/cycle )
By the way, whether you have 3 images or just 1 in the DOM when the
page loads is irrelevant to your needs; it's more a matter of what you
want to have visible if JavaScript and/or CSS are not available, since
you can have images layered on top of each other through setting
position to absolute and appropriate z-index.
If you could provide a little more detail, I think that would help us
help you.
Thanks,
Karl
________________
Karl Swedberg
On Dec 31, 3:12 am, Karl Swedberg <[EMAIL PROTECTED]> wrote:
On Dec 30, 2007, at 10:31 AM, Jeroen wrote:
On Dec 30, 2007 12:16 PM, tetrix <[EMAIL PROTECTED]> wrote:
so no one knows how to do this simple thing?
If you want to perform the same function on more then one element,
just assign a
common class and use the appropriate jQuery selector.
<img class="fade" src="x.jpg">
<img class="fade" src="y.jpg">
<img class="fade" src="z.jpg">
$(window).load( function () {
$('.fade').fadeOut(4000);
})
This should work afaik.
--
Jeroen
Or, enclose them in a containing div. Something like this, perhaps:
<div id="fade">
<img src="x.jpg">
<img src="y.jpg">
<img src="z.jpg">
</div>
and ...
$(window).load( function () {
$('#fade img').fadeOut(4000);
})
Lots of different ways. :-)
--Karl
_________________
Karl Swedbergwww.englishrules.comwww.learningjquery.com
