Forums

alexbass

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

noahgelman

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.

alexbass

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

noahgelman

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

alexbass

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!

noahgelman

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

alexbass

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!

vijaywebmaker

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<length;i++) { 
anchors[i].onmouseover= function() { 
var spot = -1; 
this.setAttribute('spot', spot); 
this.style.backgroundPosition= '15px 0px'; 
} 
anchors[i].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<length;i++) { 
var spot = anchors[i].getAttribute('spot'); 
if (spot>0) { 
spot = spot - 2; 
if(spot<0) spot = 0; 
anchors[i].style.backgroundPosition= spot+'px 0px'; 
anchors[i].setAttribute('spot', spot); 
} 
} 

setTimeout(animate, 4); 
}

jigsawnet

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

jigsawnet

presume it needs crossfading somehow ?

raulursu

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

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

}

);

jigsawnet

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

treehouse : what would you like to learn today?

Forums

jQuery simultaneous fade-in-out