Question

我一直在寻找一段时间，但还没有结果..我有多个带有动画的鼠标悬停事件。因此，如果还有其他动画正在运行，我希望能够禁用鼠标悬停事件。

我一直在玩jQuery.stop()很多但不可能让它发挥作用。我实际上不确定将此代码放在我的函数中...

这是我带有地图的html：

<img src="assets/menu588x588.png" alt="" usemap="#map" />
   <map id="map" name="map">
      <area onmouseover="driveTo(330);" shape="poly" coords="93, 264, 2, 270, 7" />
      <area onmouseover="driveTo(300);" shape="poly" coords="122, 336, 101, 390" />
      <area onmouseover="driveTo(230);" shape="poly" coords="370, 335, 446, 388, 3574" />
   </map>

我的JS函数有一些超时和动画：

    function driveTo(new_position){
              $(function() {
                var pre_position   = Number(document.getElementById("pre-position").value);
                var goal           = 360 - pre_position + new_position;
                var $elem          = $(".car-box"), degree = pre_position, timer;

                rotate(goal);

                function rotate(goal) {
                  $elem.css({ 'transform': 'rotate(' + degree + 'deg)'});

                  if(new_position < pre_position){
                    if(goal > 0){
                      timer = setTimeout(function() {
                          --goal;
                          ++degree;
                          rotate(goal);
                      },5);
                    }
                    if(goal === 0){
                      document.getElementById("pre-position").value = new_position;
                    }
                  }
                }
              });
            }

我害怕在所有这些内在功能中有点迷失..

非常感谢您提出任何建议！

Answer 1

试试这个：

var inProgress = false;
function driveTo(new_position){

    if(inProgress){
        return;
    }


    $(function() {
        inProgress = true;

        var pre_position   = Number(document.getElementById("pre-position").value);
        var goal           = 360 - pre_position + new_position;
        var $elem          = $(".car-box"), degree = pre_position, timer;

        rotate(goal);

        function rotate(goal) {
            $elem.css({ 'transform': 'rotate(' + degree + 'deg)'});

            if(new_position < pre_position){

                if(goal > 0){
                    timer = setTimeout(function() {
                        --goal;
                        ++degree;
                        rotate(goal);
                    },5);
                }
                if(goal === 0){
                    document.getElementById("pre-position").value = new_position;
                    inProgress = false;
                }
            }
        }
    });
}

jQuery阻止onmouseover事件

1 个答案: