单击该元素和其他元素上的click＆mouseenter / mouseleave上的Animate元素

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

理想情况下，用户应该能够鼠标输入/离开制表符或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＆mouseenter / mouseleave上的Animate元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-04 16:26:48

单击该元素和其他元素上的click＆mouseenter / mouseleave上的Animate元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-04 16:26:48

解决方案1
0 已采纳 2016-03-04 16:26:48