jquery logo fadeIn & fadeOut

DEMO
code:

<script>
$(function() {
	$("#ui").hide();
	$("#jq").mouseover(function() {
		$(this).hide();
		$("#ui").fadeIn();
	});
	$("#ui").mouseout(function() {
		$(this).hide();
		$("#jq").fadeIn();
	});
});
</script>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" id="jq" />
<img src="http://jqueryui.com/images/logo.gif" id="ui" />

code explanation:
we have to images
first one has the id: jq, second: ui
we hided ui be default, when the mouse comes over jq, jq will be hidden on ui will fadeIn, when the mouse leaves ui, ui will hide and jq will fadeIn.