Question

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

    <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”）无济于事。

理想情况下，用户应该能够使用mouseenter /离开tab或div来激活“摆动”。如果在tab或div中，用户单击，则div应该被设置为动画并保持该状态，直到再次单击（即使发生mouseleave）。

Answer 1

我太明显地过早地问了这个问题。更加坚持不懈，我已经解决了这个问题。

我已经找到了正确使用.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>

Click＆amp;上的Animate元素mouseenter / mouseleave在该元素和其他元素上

1 个答案: