2

JS小提琴

我有 4 个背景图像，并且想在鼠标进入菜单时更改背景图像。即。（在我的演示中是飞星）并且在鼠标移出时它将显示默认背景图像。

  • 在menuone 和 star1 上 - background image one display
  • 在menutwo 和 star2 上 - background image two display
  • 在menuthree 和 star3 上 - background image three display

就像鼠标移出默认图像一样明智。
我已经完成了隐藏，展示了它的作品，但是当我尝试淡入淡出效果时它看起来不同，我需要在更改 bg 图像时使用淡入淡出效果

请看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();
});
4

2 回答 2

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);
于 2013-09-13T07:51:38.850 回答
0

您正在显示两个 div，但使 fadeIn 效果 uopn 成为一个。

您需要将效果应用于两者，

    $("#OneDiv").fadeIn(400);  
    $("#Tab1Btn").fadeIn(400);

检查这个http://jsfiddle.net/yUKdh/7/

注意：刚刚将效果应用于开始的鼠标事件#

于 2013-09-13T07:40:17.817 回答