Question

我有这个div，当它徘徊时，它将激活另一个div。当用户将鼠标移动到激活的div上时，我希望该div保留。这是一个片段。

当您将鼠标悬停在金盒子上时，会隐藏紫色框并显示灰色框。当鼠标悬停在灰色框上时，我希望灰色框保持不变，而不是消失。然后当鼠标第二次盘旋在金盒子上时，灰色盒子将自行隐藏，紫色将返回。如何在Jquery中使用流畅的动画做到这一点？

$(function() {
  $("#startMenu").hide();
  var timeoutId;
  $("#menuDesktop").hover(function() {
      if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
          timeoutId = null;
          $("#topBarDesktop").slideUp('400');
          $("#startMenu").slideDown('1000');
        }, 400);
      }
    },
    function() {
      if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;

      } else {
        $("#startMenu").slideUp('slow');
        $("#topBarDesktop").slideDown('400');
      }
    });
});

#topBarDesktop {
  position: fixed;
  top: -.1em;
  right: -1em;
  padding: 20px 100%;
  background: purple;
}
#menuDesktop {
  width: 50px;
  position: absolute;
  height: 50px;
  background: gold;
  display: inline-block;
  vertical-align: top;
  float: left;
  left: -15px;
  top: -15px;
}
#menuDesktop:hover {
  background: red;
}
#startMenu {
  background: grey;
  padding: 100% 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topBarDesktop">

</div>
<div id="menuDesktop">

</div>
<div id="startMenu">

</div>

Answer 1

您可以将else更改为else if，以检查#startMenu是否悬而未决。然后，您还要确保在.hover()和#menuDesktop上同时致电#startMenu，以便当您悬停在#startMenu之后，系统会重新滑回到位同样。

$("#menuDesktop, #startMenu").hover(function() { //Added #startMenu to selector
  if (!timeoutId) {
    timeoutId = window.setTimeout(function() {
      timeoutId = null;
      $("#topBarDesktop").slideUp('400');
      $("#startMenu").slideDown('1000');
    }, 400);
  }
}, function() {
  if (timeoutId) {
    window.clearTimeout(timeoutId);
    timeoutId = null;
  } else if ($("#startMenu:not(:hover)").length && $("#menuDesktop:not(:hover)").length) { //Checks that neither #startMenu or #menuDesktop is hovered on.
    $("#startMenu").slideUp('slow');
    $("#topBarDesktop").slideDown('400');
  }
});

查看此工作fiddle

Answer 2

我在Kld脚本

中添加了更多行

    $(function() {
  $("#startMenu").hide();
  var timeoutId;
  $("#menuDesktop").hover(function() {
     $("#menuDesktop").css("background", "red");
      if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
          timeoutId = null;
          $("#topBarDesktop").stop(true, true).slideUp('400');
          $("#startMenu").stop(true, true).slideDown('1000');
        }, 400);
      }
    },
    function() {
      if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;

      } else {
        $("#startMenu").stop(true, true).slideUp('slow');
        $("#topBarDesktop").slideDown('400');
         $("#menuDesktop").css("background", "gold");
      }
    });

  $("#startMenu").hover(function(){
    $( this).stop();
       $("#topBarDesktop").stop(true, true);
       $("#menuDesktop").css("background", "red");
  }, function(){
     $("#startMenu").stop(true, true).slideUp('slow');
     $("#topBarDesktop").slideDown('400');
     $("#menuDesktop").css("background", "gold");
  })       
});

将鼠标悬停在div上会触发div，如果继续悬停则会停留

2 个答案: