Grow your CSS skills. Land your dream job.

Multiple Effects

  • # May 10, 2010 at 4:07 am

    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

    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();
    });

    # May 11, 2010 at 4:40 am

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".