jQuery fadeIn 效果不工作其适用于 2 div 的 Flicker，但显示/隐藏工作完美需要更改具有淡入淡出效果的 bg 图像

Question

JS FIDDLE

我有 4 个 bg 图像，并且想在鼠标进入菜单时更改背景 img .ie。 (我的 demo 中的飞星)并且在鼠标移出时它将显示默认背景图像。

• On menuone & on star1 - 背景图片显示
• On menutwo & on star2 - 背景图片二显示
• On menuthree & on star3 - 背景图片三显示

在鼠标移开时默认图像会显示。
我已经完成了 hide,show 它的工作，但是当我尝试 fadein 效果时它看起来不同，我需要在更改 bg 图像时使用 fade 效果

请看一下menuShowDisplaywithFadeEffect()函数

代码:

function menuShowDisplaywithFadeEffect() {
    $("#star1").on("mouseover", function () {
        //$("#OneDiv").fadeIn(400);  
        $("#OneDiv").show();
        $("#Tab1Btn").show();
      });
   $("#star1").on("mouseout", function () {
        $("#OneDiv").hide();
        $("#Tab1Btn").hide();
      });
   $("#Tab1Btn").on("mouseover", function () {
        $("#OneDiv").show();
        $("#Tab1Btn").show();
      });
   $("#Tab1Btn").on("mouseout", function () {
        $("#OneDiv").hide();
        $("#Tab1Btn").hide();
      });
    // same for others menus ....
  }

标记:

<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>

编辑:

我试图停止动画。即在鼠标悬停时移动星星并重新启动，但它只在第一次起作用，仍然无法解决我的问题

jQuery("#star1").hover(function () {
    clearInterval(resultAnimation);
    jQuery("#OneDiv").fadeIn(400);
    jQuery("#OneDiv").show();
    jQuery("#Tab1Btn").show();
},
function () {
    resultAnimation = setInterval(myFunctionRotation, 100);
    jQuery("#OneDiv").fadeOut(400);
    jQuery("#Tab1Btn").hide();
});

Answer 1

将所有 .show 更改为 .fadeIn(400) 并将 .hide 更改为 .fadeOut(400) :

function menuShowDisplaywithFadeEffect() {
    $("#star1").on("mouseover", function () {
        //$("#OneDiv").fadeIn(400);  
        $("#OneDiv").fadeIn(400);
        $("#Tab1Btn").fadeIn(400);
    });

    $("#star1").on("mouseout", function () {

        $("#OneDiv").fadeOut(400);
        $("#Tab1Btn").fadeOut(400);
    });

    $("#star2").on("mouseover", function () {
        //  $("#twoDiv").fadeIn(400);  
        $("#twoDiv").fadeIn(400);
        $("#Tab2Btn").fadeIn(400);
    });

    $("#star2").on("mouseout", function () {
        $("#twoDiv").fadeOut(400);
        $("#Tab2Btn").fadeOut(400);
    });

    $("#star3").on("mouseover", function () {
        //   $("#threeDiv").fadeIn(400);  
        $("#threeDiv").fadeIn(400);
        $("#Tab3Btn").fadeIn(400);
    });

    $("#star3").on("mouseout", function () {

        $("#threeDiv").fadeOut(400);
        $("#Tab3Btn").fadeOut(400);
    });

    $("#Tab1Btn").on("mouseover", function () {
        $("#OneDiv").fadeIn(400);
        $("#Tab1Btn").fadeIn(400);
    });

    $("#Tab1Btn").on("mouseout", function () {
        $("#OneDiv").fadeOut(400);
        $("#Tab1Btn").fadeOut(400);
    });

    $("#Tab2Btn").on("mouseover", function () {
        $("#twoDiv").fadeIn(400);
        $("#Tab2Btn").fadeIn(400);
    });

    $("#Tab2Btn").on("mouseout", function () {
        $("#twoDiv").fadeOut(400);
        $("#Tab2Btn").fadeOut(400);
    });

    $("#Tab3Btn").on("mouseover", function () {
        $("#threeDiv").fadeIn(400);
        $("#Tab3Btn").fadeIn(400);
    });

    $("#Tab3Btn").on("mouseout", function () {
        $("#threeDiv").fadeOut(400);
        $("#Tab3Btn").fadeOut(400);
    });

}

编辑:

$("#OneDiv").stop(true, true).fadeIn(400);
$("#Tab1Btn").stop(true, true).fadeIn(400);