Question

我正在尝试编写一个中央导航，当单击图像时，该图像允许从图像后面出现4个图块。我遇到一个问题，其中的图块具有悬停的CSS样式，可以中断其切换动画，并且想知道如何在动画运行时临时禁用悬停。

https://jsfiddle.net/Destinneh/4tgs2L5y/10/

$('#button').click(function(){
    if($(this).attr("trigger")==="0"){
        $('#navDown').animate({"top":"90%"},600);
        $('#navUp').animate({"top":"10%"},600);
        $('#navRight').animate({"left":"10%"},600);
        $('#navLeft').animate({"left":"90%"},600);
        $(this).attr("trigger","1");
}
else{
        $('#navUp').animate({"top":"50%"},600);
        $('#navDown').animate({"top":"50%"},600);
        $('#navLeft').animate({"left":"50%"},600);
        $('#navRight').animate({"left":"50%"},600);
        $(this).attr("trigger","0");
}
});

Answer 1

您可以介绍新课程
使用它与悬停一起玩
开始动画时删除课程
动画结束时添加班级

例如，将JS代码更改为以下代码：

const navIds = ['#navDown', '#navUp', '#navRight', '#navLeft'];

function onAnimateStart() {
  for (const id of navIds) {
    $(id).removeClass('hoverOn');
  }
}

function onAnimateComplete() {
  for (const id of navIds) {
    $(id).addClass('hoverOn');
  }
}

$('#button').click(function() {
  onAnimateStart();
  if ($(this).attr("trigger")==="0") {
    $('#navDown').animate({"top":"90%"}, 600);
    $('#navUp').animate({"top":"10%"}, 600);
    $('#navRight').animate({"left":"10%"}, 600);
    $('#navLeft').animate({"left":"90%"}, 600, function() {
      onAnimateComplete()
    });
    $(this).attr("trigger","1");
  } else {
    $('#navUp').animate({"top":"50%"}, 600);
    $('#navDown').animate({"top":"50%"}, 600);
    $('#navLeft').animate({"left":"50%"}, 600);
    $('#navRight').animate({"left":"50%"}, 600, function() {
      onAnimateComplete();
    });
    $(this).attr("trigger","0");
  }
});

更改CSS部分

.centreNav:hover{
    transition: 0.25s;
    width: 105px;
    height: 105px;
    border:2px solid white;
}

收件人：

.hoverOn:hover {
    transition: 0.25s;
    width: 105px;
    height: 105px;
    border: 2px solid white;
}

要添加HTML部分（基本上将hoverOn添加到您的centreNav元素中）：

<div id="containerCent">
  <a id="button" trigger="0" href="#"><img src="images/Logo.png" alt=" logo"></a>           

  <div id="spiralNav">
    <a href="#">
      <div id="navUp" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>

    <a href="#">
      <div id="navLeft" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>

    <a href="#" target="_blank">
      <div id="navRight" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>

    <a href="#">
      <div id="navDown" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>
    </div>
</div>

JSFiddle，上面有所有更改： https://jsfiddle.net/g3p2erfo/

如何在.animate命令期间临时禁用悬停？

1 个答案: