Home › Forums › JavaScript › Multiple Effects
- This topic is empty.
-
AuthorPosts
-
May 10, 2010 at 4:07 am #28967AthelstanParticipant
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
May 11, 2010 at 1:05 am #75333vanessagarcia1MemberTry 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();
});May 11, 2010 at 4:40 am #75153AthelstanParticipantThank 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
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.