PDA

View Full Version : Crossfade between 2 divs using JS function(s)



rpain
07-26-2010, 03:27 PM
Hi. I'm trying to crossfade between two div tags on clicking a link. I've attached a couple of screenshots - is there any way when someone clicks on the button bottom left if fades out the wave and fades in the form? I know you can use the visible: none; to hide div tags but I don't know whether it's possible to fade one out and another in as an onclick JS function.

Ideas very welcome...

Thanks,

Richard

azoomer
07-27-2010, 12:46 AM
Hi Richard, I have made a crossfade snippet for your pictures using jQuery, don't really know how to do it in regular javascript. Here is how it looks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Richards fading pictures</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#imagebox {
width:320px;
height:280px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#imagebox img {
position:absolute;
top:0;
left:0;
}
#button {
width:60px;
height:30px;
position:absolute;
bottom:0;
left:0;
color:#FFF;
padding-left:10px;
cursor:pointer;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#button').click(function() {
if ($('#image1').css("opacity")!= "1") {
$('#image1').fadeTo(1000, 1);
} else {
$('#image1').fadeTo(1000, 0);
}
});
});
</script>
</head>
<body>

<div id="imagebox">
<img src="2.jpg" width="320" height="280" alt="image 2" />
<img src="1.jpg" width="320" height="280" alt="image 1" id="image1" />
<div id="button">button</div>
</div> <!-- end imagebox -->

</body>
</html>

I am attaching a zip folder with everything. Unzip it and open the index.html file. Click on the button ( white text ) in the lower left corner. It is made as a toggle so you can go back and forth. You can put a background image in the button div or just have it transparent. The placement of the button can be adjusted by adding a pixel value to the 'left:??px;' and bottom:??px;' in the #button css.

Edit:
Okay I got a little caught up in thinking about the images. Here is the same but with DIV's instead.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Richards fading pictures</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#imagebox {
width:320px;
height:280px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#imagebox div {
position:absolute;
top:0;
left:0;
}
#button {
color:#FFFFFF;
cursor:pointer;
height:30px;
left:0;
padding-left:10px;
position:absolute;
top:250px !important;
width:60px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#button').click(function() {
if ($('#div1').css("opacity")!= "1") {
$('#div1').fadeTo(1000, 1);
} else {
$('#div1').fadeTo(1000, 0);
}
});
});
</script>
</head>
<body>

<div id="imagebox">
<div><img src="2.jpg" width="320" height="280" alt="image 2" /></div>
<div id="div1"><img src="1.jpg" width="320" height="280" alt="image 1" /></div>
<div id="button">button</div>
</div> <!-- end imagebox -->

</body>
</html>

Just save this as an .html file in the same folder and it should work fine

rpain
07-27-2010, 10:34 AM
Hi,

Thanks for that - really appreciate the time you've spent. The only thing is that the picture needs to crossfade into a live form so originally you get:

<div class="firstelement">Image src here</div>

and on clicking the button you fade to

<div class="secondelement"><form action="submit.php">Code here</form></div>

Thank you so much so far :-)

vwphillips
07-27-2010, 11:39 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcAnimate.prototype.cng=function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
}

zxcAnimate.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>
<script type="text/javascript">
<!--
function Swap(id1,id2,ms){
if (!this.oop1){
this.oop1=new zxcAnimate('opacity',id1,0);
this.oop2=new zxcAnimate('opacity',id2,100);
this.ud=true;
}
this.oop1.obj.style.zIndex=ud?'2':'0';
this.oop1.animate(this.oop1.data[0],ud?100:0,ms,[0,100]);
this.oop2.animate(this.oop2.data[0],ud?0:100,ms,[0,100]);
ud=!ud;
}
//-->
</script>
</head>

<body>
<input type="button" name="" value="Swap" onclick="Swap('p1','p2',1000);">
<div id="p1" style="position:absolute;left:100px;top:100px;width:500px;height:500px;background-Color:red;" ></div>
<div id="p2" style="position:absolute;left:100px;top:100px;width:500px;height:500px;background-Color:green;" ></div>
</body>

</html>

customise the size and content of the divs as required

rpain
07-27-2010, 12:58 PM
You absolute stars!

Cheers,
Richard

rpain
07-28-2010, 01:33 PM
http://www.cybercan.co.uk/drukarz/page1.htm

OK - the link at the bottom is changing the logo nicely.

The issue I now have is that when the crossfade occurs the purple starts to show through. Is there any way I can only have a fade in and not a fade out. ie when pic 1 is showing and you click the envelope, the second pic just fades on top and then when you click the envelope again, the original pic fades on top again?

The alternative is to have a 3rd pic behind all of them with the contents of the second pic so you never see the purple but this seems a little bit of an awkward work around.

Many thanks for your help so far - I think it looks really neat.

Richard

rpain
07-28-2010, 04:31 PM
No worries - fixed it with a third image.

Thanks for all your help :-)