Question

这对我来说是新的，我不知道如何处理它。

该页面有一个徽标，使用转换来更改其大小和颜色，并由HTML底部触发：

document.onload="initialize()"
setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.95)');
        $('#path2').css('transform','scale(.95)');
        $('#path2').css('fill','#F7A700');
    }, 2000);
$('#path1').css('transform','scale(1.05)');
    $('#path2').css('transform','scale(1.00)');
    $('#path2').css('fill','#FFCF55');
}, 4000);

这将启动转换并协调更改svg路径的颜色。在单独的脚本页面上有一个确定当前页面滑块的函数，我需要更改#path2上特定页面的css填充。我已尝试if...else语句，将setInterval()函数移至同一页面等，但没有任何内容可让我覆盖setInterval()函数中的填充颜色。

REVISION：它包含在html中，并且有一个单独的js页面，其中包含所有其他功能。所以我想也许它与此有关但现在我理解它正在无限循环上运行，所以我试图做的任何改变都将被覆盖。它是一个带有多个路径的svg徽标，在主页幻灯片上，一条路径需要为白色，其他所有页面幻灯片都保持相同。只有一页html，内容在滑块上滑动。不确定我是否更好地解释了它。我正在处理由其他人完成的现有代码，因此我尝试使用我已经给出的内容，但也许有更好的解决方案来运行它？也许通过CSS？我需要它加载窗口或文档加载并无限运行，但需要能够修改它上面的CSS。我必须使用css转换来设置它。

Answer 1

间隔设置为永久运行。如果从其他脚本设置颜色，则间隔将在下次间隔运行时覆盖颜色。一种选择是在从其他脚本设置颜色时停止间隔。您需要一个变量来保存区间ID。

var timer = null;

您需要在开始间隔时保存间隔ID。

timer = setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.75)');
        $('#path2').css('transform','scale(.75)');
        $('#path2').css('fill','#F7A700');
    }, 2000);
    $('#path1').css('transform','scale(1.50)');
    $('#path2').css('transform','scale(1.50)');
    $('#path2').css('fill','#FFCF55');
}, 4000);

在您的其他脚本中，请在设置颜色时停止间隔。

if (timer) {
    clearInterval(timer);
    timer = null;
}
$('#path2').css('fill','#00FF00');

修改

另一种可能的选择是使用布尔标志来停止动画的各个部分。这将允许您停止填充动画，但继续重新播放动画。您需要一个布尔标志来指示填充是否应该设置动画。将标志初始化为true。

var animateFill = true;

使用该标志确定是否应为填充属性设置间隔。

setInterval(function(){ setTimeout(function(){ $('#path1').css('transform','scale(.75)'); $('#path2').css('transform','scale(.75)'); if (animateFill){ $('#path2').css('fill','#F7A700'); } }, 2000); $('#path1').css('transform','scale(1.50)'); $('#path2').css('transform','scale(1.50)'); if (animateFill) { $('#path2').css('fill','#FFCF55'); } }, 4000);

在您的其他脚本中，设置填充颜色时将标志设置为false。

animateFill = false; $('#path2').css('fill','#00FF00');

如果您以后需要重新启动填充颜色的动画，请将标志设置回true。

animateFill = true;

覆盖不同页面上的javascript函数

1 个答案: