1)
<html><head>
<style>
.red {
width: 100px ;
height: 100px ;
background: red ;
display: block ;
}
.green {
width: 100px ;
height: 100px ;
background: green ;
display: none ;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(".red").mouseover(function() {
$(this).slideUp() ;
$(".green").slideDown() ;
}) ;
$(".green").mouseout(function() {
$(this).slideUp() ;
$(".red").slideDown() ;
}) ;
}) ;
</script>
</head><body>
<div class="red"></div>
<div class="green"></div>
</body></html>
2)
<html><head>
<style>
div {
width: 100px ;
height: 100px ;
background: red ;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
var newWidth = "200px", oldWidth = "100px" ;
$("div").hover(function() {
$(this).stop().animate({width: newWidth}, "slow") ;
},
function() {
$(this).stop().animate({width: oldWidth}, "slow") ;
}) ;
}) ;
</script>
</head><body>
<div></div>
</body></html>