Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery simultaneous fade-in-out

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #31658
    alexbass
    Participant

    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

    #59907
    noahgelman
    Participant

    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.

    #59890
    alexbass
    Participant

    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 :/

    #59867
    noahgelman
    Participant

    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

    #59864
    alexbass
    Participant

    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!

    #59865
    noahgelman
    Participant

    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

    #59128
    alexbass
    Participant

    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!

    #56944

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

    #127724
    jigsawnet
    Member

    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…..

    #127888
    jigsawnet
    Member

    presume it needs crossfading somehow ?

    #127895
    raulursu
    Member

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

    }

    );

    #127917
    jigsawnet
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.