Posts Tagged ‘when a button is pressed (transitions)’


Cross fading images One image to another, when a button is pressed (transitions)
Code

First up, the HTML markup. Again, with no CSS enabled, you just get two images.

<div id="cf2">
	<img src="/tests/images/Stones.jpg" />
	<img src="/tests/images/Summit.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>

Then the CSS. I’ve added a class with the opacity value.

#cf2 {
	position:relative;
	height:281px;
	width:450px;
	margin:0 auto;
}
#cf2 img {
	position:absolute;
	left:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;	
	transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
	opacity:0;
}
#cf_onclick {
	cursor:pointer;
}

Then the extremely short JS. Note that the browser is smart enough to realise that it can animate to the new properties, I didn’t have to set them in javascript (thought that works too).

$(document).ready(function() {
	$("#cf_onclick").click(function() {
		$("#cf2 img.top").toggleClass("transparent");
	});
});
Advertisements