在单击时对元素进行动画处理，并在该元素和其他元素上单击鼠标输入/鼠标离开

Animate element on click & mouseenter/mouseleave on that element and other

本文关键字：元素 鼠标 单击 其他 输入 离开 处理 动画      更新时间：2023-09-26

我在以下布局中有 3 个主要的div 元素。

https://jsfiddle.net/wpztofb7/

    <body>
  <div id="topBox" class="otherBox">
    TEST TOP
  </div>
  <div id="middleBox" class="middleBox">
    SECTION
  </div>
  <div id="tab" class="tab"><span>New Comment</span></div>
  <div id="bottomBox" class="otherBox">
    TEST BOTTOM
  </div>
</body>

.otherBox {
  border: 2px solid #73AD21;
  width: 100%;
  height: 150px;
}
.middleBox {
  border: 2px solid #73AD21;
  width: 100%;
  height: 25px;
}
.tab {
  border-left: 2px solid #73AD21;
  border-right: 2px solid #73AD21;
  border-bottom: 2px solid #73AD21;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  height: 15px;
  width: 120px;
  margin-bottom: 20px;
}

$(document).ready(function() {
  click = 0;
  $("#tab, #middleBox").click(function() {
    if (click === 0) {
      click = 1;
      $("#middleBox").animate({
        height: '400px'
      }, 500);
    } else {
      click = 0;
      $("#middleBox").animate({
        height: '30px'
      }, 850);
    };
  });
  if (click === 0) {
    //Do wiggle
    $("#tab, #middleBox").mouseenter(function() {
      $("#middleBox").animate({
        height: "40px"
      }, 800);
    });
    $("#middleBox").mouseleave(function() {
      $("#middleBox").animate({
        height: "30px"
      }, 800);
    });
  }
});

中间div 在左下角有一个小选项卡。希望让中间的div在单击自身或选项卡时进行动画处理。而在mouseenter/mouseleave上需要一个"摆动"动画来吸引用户对可扩展的div元素的注意。

当激活选项卡鼠标悬停，然后单击激活时，该行为出错。然后，鼠标位于扩展的中间div 内，但任何鼠标移动都会折叠div。

有人可以指出我避免此问题的正确方向吗？我是新来的，所以要温柔！

我已经在相关元素上尝试了 .off（"mouseenter mouseleave"），但无济于事。

理想情况下，用户应该能够鼠标输入/离开选项卡或div 以激活"摆动"。如果用户在选项卡或div 中单击，则div 应以动画形式保持该状态，直到再次单击（即使发生鼠标离开）。

我显然过早地提出了这个问题。再坚持一点，我已经解决了这个问题。

我已经找到了 .off（） 的正确用法

如果有人有更好或更合适的方法来完成相同的任务，请随时发布。或者如果对我的代码有任何批评......

<script>
    $(document).ready(function () {
        click = 0;
        $("#tab, #middleBox").click(function () {
            if (click === 0) {
                click = 1;
                $("#middleBox").animate({ height: '400px' }, 500);
                $("#middleBox, #tab").off("mouseenter mouseleave");
            }
            else {
                click = 0;
                $("#middleBox").animate({ height: '30px' }, 850);
            };
        });
        if (click === 0) {
            //Do wiggle
            $("#tab, #middleBox").mouseenter(function () {
                $("#middleBox").animate({ height: "40px" }, 800);
            });
            $("#middleBox").mouseleave(function () {
                $("#middleBox").animate({ height: "30px" }, 800);
            });
        }
    }); </script>
相关文章：