Grow your CSS skills. Land your dream job.

jQuery simultaneous fade-in-out

  • # February 16, 2011 at 6:29 pm

    Hi there

    I’m making a sort of content page, and I’m going to have e.g. 6 divs, each with different content but all in the same place. When you click the link to a different box, I want jQuery to fade out whatever the current one is, and fade in the new one simultaneously, all at the same time rather than fade-in, fade-out.

    Is there anyway this can easily done?

    Thanks

    # February 16, 2011 at 6:41 pm

    Yeah, this is pretty easy. Can you come up with the jquery yourself? It is just a click function, tell elements to fade out and the one you want to fade in. The way the html should be marked up is that all the content divs you want should be next to each other, and positioned absolute so they’re stacked on top of each other.

    # February 16, 2011 at 6:55 pm

    Yeah i’ve done it before, but I ended up with:

    $(".ab").click(function () {
    $(".home").hide();
    $(".services").hide();
    $(".location").hide();
    $(".contact").hide();
    $(".about").fadeIn(1000);
    });

    Which hid everything and faded the next one in, but it didn’t fade out. Could I make it a bit more like:

    $(".ab").click(function () {
    $(".home").fadeOut(500);
    $(".services").fadeOut(500);
    $(".location").fadeOut(500);
    $(".contact").fadeOut(500);
    $(".about").pause(500).fadeIn(500);
    });

    ? It just seems a bit… mucky :/

    # February 16, 2011 at 7:06 pm

    oh wait, do you want it to fade out, then the new one fade in? or do you want them to fade out and the new one fade in at the same time? 2 different effects

    # February 16, 2011 at 7:08 pm

    Actually despite what I said in the first post, either of those would be acceptable… just as long as they don’t break and push the ‘other one’ down… might need some absolute styling!

    # February 16, 2011 at 7:16 pm

    Well the absolute styling will prevent any pushing around.

    Try this:

    $(".ab").click(function () {
    $(".home, .services, .location, .contact,").fadeOut(500, function() {
    $(".about").pause(500).fadeIn(500);
    });
    });

    That will fade out the old content, then fade in the new content.

    $(".ab").click(function () {
    $(".home, .services, .location, .contact,").fadeOut(500);
    $(".about").pause(500).fadeIn(500);
    });

    That will fade out the old content while fading in the new content

    # February 20, 2011 at 6:59 pm

    Thanks, this worked really well… Although if you click the next button too quickly it screws it up a bit but I don’t have the time and energy to find a fix! Thanks for your help again!

    # March 3, 2011 at 12:49 pm

    Hi,
    This code will be helpful to stimulate fade in fade out animation

    function init() {

    if(document.getElementById && document.createTextNode) {
    var menu = document.getElementById('menu');
    var anchors = menu.getElementsByTagName('a');
    for(var i=0, length=anchors.length;i anchors.onmouseover= function() {
    var spot = -1;
    this.setAttribute('spot', spot);
    this.style.backgroundPosition= '15px 0px';
    }
    anchors
    .onmouseout= function() {
    var spot = 15;
    this.setAttribute('spot', spot);
    }
    }
    animate();
    }
    }

    function animate() {
    var menu = document.getElementById('menu');
    var anchors = menu.getElementsByTagName('a');
    for(var i=0, length=anchors.length;i var spot = anchors
    .getAttribute('spot');
    if (spot>0) {
    spot = spot - 2;
    if(spot<0) spot = 0;
    anchors
    .style.backgroundPosition= spot+'px 0px';
    anchors
    .setAttribute('spot', spot);
    }
    }

    setTimeout(animate, 4);
    }

    # March 11, 2013 at 5:12 am

    I have an issue with something similar if anyone can help ?

    Using some jquery that fades images in holds them then fades out and goes on to the next image
    But i can’t work out how to get it to fade the next image in **before** fading the first image out
    this is the bit of code that i think controls the fading in and out…
    function showText(id){
    var text = $(‘‘,{
    src:settings.textLayers[id],
    css: {
    marginTop : promoIMG.offset().top+settings.textTopOffset
    }
    }).hide();

    text.load(function(){
    text.fadeIn(‘slow’).delay(settings.textShowTime).fadeOut(‘slow’,function(){text.remove();
    splashScreen.trigger(‘changeText’,[id+1]);
    });
    });

    splashScreen.append(text);
    }
    any help anyone can give would be good as I’m a novice at this stuff…..

    # March 12, 2013 at 10:51 am

    presume it needs crossfading somehow ?

    # March 12, 2013 at 11:33 am

    You also can use animate (can decrease opacity for some element and in the same time can increase the opacity for another element/elements).

    See this example :[working demo](http://www.w4schools.org/simple-slideshow-12.html “jQuery animation”)

    There is something like that:

    current.animate({opacity: 0}

    , {duration:interval,

    step: function(now,fx) {next.css(“opacity”,1-now);}, //here is making the oposite opacity for another element. //for each step

    complete:function() { current.removeClass(“current”);

    current.css(“opacity”,””);

    next.addClass(“current”);

    shoot(id,interval); }

    }

    );

    # March 12, 2013 at 1:32 pm

    was hoping to use the current setup just tweak the code from fading in then out to a crossfade, as its all styled to fit the site at the moment…

    rather than change it for something different – though that does look quite interesting…

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

You must be logged in to reply to this topic.

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