hover表示した画像をフェード切り替え表示したい

実現したいこと

jQueryでhover表示した画像をフェード切り替えしたい。

前提

ホームページのメガメニューを製作しており、メニューのテキストをhover時にイメージ画像を表示・切り替えしたいと思いコードを書いたのですが、知識が浅くどこを間違えているのか分からず、ご教授いただけますと幸いです。

■html

menu01 menu02 menu03

■jQuery
<script>
$(function() {
$(".change_btn01").hover(function() {
$(".chenge_image").attr("src","img/img01.png");
});
$(".change_btn02").hover(function() {
$(".chenge_image").attr("src","img/img02.png");
});
$(".change_btn03").hover(function() {
$(".chenge_image").attr("src","img/img03.png");
});
});
</script>

■css

.change_image{ transition:all 0.5s ease; }