Multiple Effects

[Athelstan]

Hi All

I am a big newbie to JQuery so I may be asking a basic question, but here goes……How can I make two, or possibly more, effect transitions finish at the same time?

I have an animate() re-sizing and re-positioning an image (speed 2000). I would like to fade up (change opacity) another image (speed 200) so that it ends simultaneously with the first transition but after a lot of head scratching I cannot see how to achieve this.

What I have so far can be seen here…http://www.iandelemare.justfree.com/helinor/demo.html.

Am I going about this in the right way?

Thanking you all in advance for any help/suggestions

Athelstan

[vanessagarcia1]

Try this one I used it in my tutorial it helps you lot .
// create our transition as a plugin
$.fn.crossfade = function () {
return this.each(function () {
// cache the copy of jQuery(this) – the start image
var $$ = $(this);

// get the target from the backgroundImage + regexp
var target = $$.css(‘backgroundImage’).replace(/^url|[()]/g, ”));

// nice long chain: wrap img element in span
$$.wrap(‘<span style="position: relative;"></span>’)
// change selector to parent – i.e. newly created span
.parent()
// prepend a new image inside the span
.prepend(‘<img>’)
// change the selector to the newly created image
.find(‘:first-child’)
// set the image to the target
.attr(‘src’, target);

// position the original image
$$.css({
‘position’ : ‘absolute’,
‘left’ : 0,
// this.offsetTop aligns the image correctly inside the span
‘top’ : this.offsetTop
});

// note: the above CSS change requires different handling for Opera and Safari,
// see the full plugin for this.

// similar effect as single image technique, except using .animate
// which will handle the fading up from the right opacity for us
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 3000);
});
});
};

// Not only when the DOM is ready, but when the images have finished loading,
// important, but subtle difference to $(document).ready();
$(window).bind(‘load’, function () {
// run the cross fade plugin against selector
$(‘img.fade’).crossfade();
});

[Athelstan]

Thank you Vanessagarcia for your reply, which on first look has gone straight over the top of my head!; as i said in my first post I am a complete newbie to JQuery.

Could you please post a link to your tutorial which may help me to understand your code.

Thank you

[Author]

Posts