Estou começando em jQuery e tenho uma dúvida: existe algum modo de deixar a mudança abaixo com um espécie de transição?
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<meta charset="utf-8" />
<script>
$(document).ready(function(){
$('#image1').on("mousemove", function(){
$(this).attr("src","http://3.bp.blogspot.com/-fm0ZV85Pz1I/TtgsNO69MLI/AAAAAAAACZw/pRDZIHWCUO4/s1600/idealhomemagazinedotcodotuk24.jpg");
})
$('#image1').on("mouseout", function(){
$(this).attr("src","http://2.bp.blogspot.com/_6lVUS4YoEPU/TQqw1vActVI/AAAAAAAAB0U/suTAg3xbBB8/s1600/arranjosnatal8.jpg");
})
})
</script>
<body>
<img src="http://2.bp.blogspot.com/_6lVUS4YoEPU/TQqw1vActVI/AAAAAAAAB0U/suTAg3xbBB8/s1600/arranjosnatal8.jpg" id="image1" />
</body>
</div>
</html>
Queria que a imagem mudasse com uma transição.