时间戳

首页 > 解决方案 > 如何在 .animate 命令期间暂时禁用悬停？

javascript - 如何在 .animate 命令期间暂时禁用悬停？

问题描述

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

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

http://sendvid.com/xodtv69a我试图避免的视频。

$('#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");
}
});

标签： javascriptjqueryhtmlcss

解决方案

  • 你可以介绍新课程
  • 用它来玩悬停
  • 开始动画时删除类
  • 动画结束时重新添加类

例如，将 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/

推荐阅读