jQuery fadeIn effect not working its Flicker which apply on 2 divs, but show/hide works perfect need to change bg image with fading effect

jQuery fadeIn effect not working its Flicker which apply on 2 divs, but
show/hide works perfect need to change bg image with fading effect

JS FIDDLE
I have 4 bg images and want to change the background img when ever mouse
enter over menus .ie. (flying stars in my demo) and on mouseout it will
show default background image.
On menuone & on star1 - background image one display
On menutwo & on star2 - background image two display
On menuthree & on star3 - background image three display
like wise on mouse out default image will show.
i have done with hide,show its works, but when i try fadein effect it look
different, i need fade effect while changing bg images
Please have a look at menuShowDisplaywithFadeEffect() function
code:
function menuShowDisplaywithFadeEffect() {
$("#star1").on("mouseover", function () {
//$("#OneDiv").fadeIn(400);
$("#OneDiv").show();
$("#Tab1Btn").show();
});
$("#star1").on("mouseout", function () {
$("#OneDiv").hide();
$("#Tab1Btn").hide();
});
$("#star2").on("mouseover", function () {
// $("#twoDiv").fadeIn(400);
$("#twoDiv").show();
$("#Tab2Btn").show();
});
$("#star2").on("mouseout", function () {
$("#twoDiv").hide();
$("#Tab2Btn").hide();
});
$("#star3").on("mouseover", function () {
// $("#threeDiv").fadeIn(400);
$("#threeDiv").show();
$("#Tab3Btn").show();
});
$("#star3").on("mouseout", function () {
$("#threeDiv").hide();
$("#Tab3Btn").hide();
});
$("#Tab1Btn").on("mouseover", function () {
$("#OneDiv").show();
$("#Tab1Btn").show();
});
$("#Tab1Btn").on("mouseout", function () {
$("#OneDiv").hide();
$("#Tab1Btn").hide();
});
$("#Tab2Btn").on("mouseover", function () {
$("#twoDiv").show();
$("#Tab2Btn").show();
});
$("#Tab2Btn").on("mouseout", function () {
$("#twoDiv").hide();
$("#Tab2Btn").hide();
});
$("#Tab3Btn").on("mouseover", function () {
$("#threeDiv").show();
$("#Tab3Btn").show();
});
$("#Tab3Btn").on("mouseout", function () {
$("#threeDiv").hide();
$("#Tab3Btn").hide();
});
}
Markup:
<div id="defaultDiv">
<img class="style5"
src="https://lh6.googleusercontent.com/a4IA9ozfybUYvvwmCEUqI49ymubwfULp6rs-EPJXtqM=w284-h203-p-no"
/>
</div>
<div id="OneDiv">
<img class="style5"
src="https://lh6.googleusercontent.com/lznxp8Ak4UuSLXPICUM8Tz0-BloSkMQMO5JDNKFE3BQ=w289-h207-p-no"
/>
</div>
<div id="twoDiv">
<img class="style5"
src="https://lh5.googleusercontent.com/0EK7Ksqb1S5jXhal-yMf85KUymYBVNbgLY36ORjMag0=w289-h207-p-no"
/>
</div>
<div id="threeDiv">
<img class="style5"
src="https://lh4.googleusercontent.com/CJgDQ9889e25EqfSEv-SbjwBJ41AJluJkQBHM8Ixq_o=w289-h207-p-no"
/>
</div>
<div id="menudiv">
<div id="star1" class="clsstar addData">
<div class="startab"></div>
</div>
<div id="Tab1Btn" class="addData"><a href="#">Menu one</a>
</div>
<div id="star2" class="clsstar addData2">
<div class="startab"></div>
</div>
<div id="Tab2Btn" class="addData2"><a href="#">Menu two</a>
</div>
<div id="star3" class="clsstar addData3">
<div class="startab"></div>
</div>
<div id="Tab3Btn" class="addData3"><a href="#">Menu three</a>
</div>
</div>