jQuery simultaneous fade-in-out

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

}

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

}

);

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

[Author]

Posts