javascript – 该元素和其他元素上的click&mouseenter / mouseleave上的Animate元素

我在以下布局中有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).

解决方法

我显然已经过早地提起问题了.更加坚持不懈,我已经解决了这个问题.

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

javascript – 该元素和其他元素上的click&mouseenter / mouseleave上的Animate元素

解决方法

相关推荐