Question

我有一个页面，其中包含一些锚点和导致该锚点的链接。我可以单击链接，锚的背景颜色将变为某种颜色。在动画的帮助下，我在10秒内使背景色消失了-首先，我将背景色设为白色，而不是从元素中删除类和样式以重新使用。

但是当我单击链接并转到动画尚未结束的锚点时，颜色与动画开始时的颜色不同，它将继续变得更加透明。

我想再次单击相同的链接（对于尚未消失的锚点），并且该锚点上的动画必须停止并以全彩色背景再次运行。我该怎么办？

代码示例：

$("a").each(function () {
      $(this).click(function () {
            const anchorName = this.href.slice(this.href.indexOf('#'));
                goToAnchor(decodeURIComponent(anchorName));
            });
    });

const goToAnchor = (anchorId) => {
 const anchor = document.getElementById(anchorId.replace('#', ''));
 const nextElem = $(anchor).parent().text() !== '' ? $(anchor).parent() : $(anchor).parent().next();
$(nextElem).addClass('focus-on-anchor');
$(nextElem).clearQueue();
(function (elem) {
    $(elem).animate({
        backgroundColor: 'rgb(255,255,255)'
    }, 10000, function () {
        $(this).removeAttr('class style');
    });
}(nextElem));
}

https://jsfiddle.net/fiorsaoirse/j247atLc/13/

Answer 1

我要做的就是在运行动画之前添加对元素中是否包含“样式”的检查：

$("a").each(function () {
      $(this).click(function () {
            const anchorName = this.href.slice(this.href.indexOf('#'));
                goToAnchor(decodeURIComponent(anchorName));
            });
    });

const goToAnchor = (anchorId) => {
 const anchor = document.getElementById(anchorId.replace('#', ''));
 const nextElem = $(anchor).parent().text() !== '' ? $(anchor).parent() : $(anchor).parent().next();
    $(nextElem).addClass('focus-on-anchor');
    $(nextElem).stop().clearQueue();
    if ($(nextElem).is('[style]')) {
    // In case when animation hasn't stopped yet
        $(nextElem).removeAttr('style');
  }
 makeElemDisappear($(nextElem));
}

const makeElemDisappear = (elem) => {
$(elem).animate({
        backgroundColor: 'rgb(255,255,255)'
    }, 10000, function () {
        $(this).removeAttr('class style');
    });
}

如何中断动画并再次运行？

1 个答案: