为什么我的嵌套setTimeout没有触发removeAttr？

Question

我有两个正在运行的setTimeout函数，但我的removeAttr函数没有触发。 我不知道为什么会这样。

编辑：实际的目标是在鼠标输入中将feGaussianBlur的变量“stdDeviation”从0设置为7，在鼠标输出时设置为7到0 ......不仅仅是一次，而是无限次。 虽然第一个路径对象仍然是动画，但第二个路径对象也应该能够单独制作动画。

下面是我的代码，但因为我使用的是插件，请点击此链接到Codepen： https ：//codepen.io/ownage/pen/MdzvjW

 var polyhoveron = TweenMax.to("#feGaussianBlur", .5, { paused:true, attr:{"stdDeviation":7}, onUpdateParams:["{self}"] }); var polyhoveroff = TweenMax.to("#feGaussianBlur2", .5, { paused:true, attr:{"stdDeviation":0}, onUpdateParams:["{self}"] }); $("svg path").mouseenter(function() { $(this).attr("filter", "url(#f1)"); polyhoveron.play(); $("p").text("Mouse has entered"); }).mouseleave(function() { $(this).attr("filter", "url(#f2)"); $("p").text("Mouse has left"); setTimeout(function() { setTimeout(function() { $(this).removeAttr("filter"); $("p").text("Why didn't removeAttr work? Now it's broken and can't be started over."); }, 500); polyhoveroff.play(); $("p").text("<polyhoveroff function>") }, 500); }); 

 html,body,svg {height:100%} body {background:cornsilk;} img,svg path {cursor:pointer;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> <p>Ready to hover. <b>Problem:</b> This only animates once so enjoy it.</p> <svg viewBox="90 -10 300 200"> <defs> <filter id="f1" x="-40%" y="-40%" height="200%" width="200%"> <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" /> <feGaussianBlur id="feGaussianBlur" result="blurOut" in="offOut" stdDeviation="0" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> <filter id="f2" x="-40%" y="-40%" height="200%" width="200%"> <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" /> <feGaussianBlur id="feGaussianBlur2" result="blurOut" in="offOut" stdDeviation="7" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <path d="m 156.29028,68.019096 c 4.67931,-1.988204 -0.12418,-10.666555 10.32783,-11.26589 1.83984,-0.1055 3.04194,0.379201 5.51291,0.764346 0.069,-1.457882 0.39368,-7.513956 0.18783,-9.0114 -0.20581,-1.497443 -2.17888,-0.886775 -3.88749,-1.604662 -2.9137,-2.004347 -3.60967,-4.508091 -4.90279,-7.066947 -1.43623,-2.842048 -2.74829,-5.873666 -3.08935,-9.039685 -0.38465,-3.570722 1.01485,-7.116117 1.23297,-10.703361 1.08612,-0.941004 2.17224,-1.882009 3.25836,-2.823013 -0.40015,-1.882008 -0.8003,-3.764017 -1.20045,-5.646025 -1.881,-1.240819 -5.47796,-1.429412 -4.39448,-4.3669975 0.12147,-1.7496304 0.24294,-3.4992608 0.36441,-5.2488912 -1.71492,0 -3.42985,0 -5.14477,0 1.55912,1.9274484 0.0233,3.2815506 -1.44728,4.4870662 -4.33942,4.6764345 -17.98037,9.8959195 -21.082,8.7530705 -0.2683,-2.332216 -2.37086,2.393413 -3.28353,0.596362 1.34212,2.644214 0.18957,5.899268 -2.70665,6.345448 -2.3295,-1.915206 -4.30895,-5.103085 -7.56114,-3.218799 -3.12217,0.22867 -5.92518,-1.40308 -8.60189,-2.759866 -1.57069,-0.466831 -4.99248,0.07945 -1.89293,1.516781 2.16684,0.932005 4.2283,1.962703 3.53082,4.572657 0,1.793017 0,3.586035 0,5.379053 3.17614,1.071151 2.57339,6.821091 5.18841,6.882203 6.54256,0.152896 6.52233,0.756564 8.9075,3.546429 5.61657,6.569528 3.49195,14.688396 5.04055,24.775964 0.71231,4.639968 4.29374,10.456375 8.59444,10.753658 2.6538,0.183442 4.77082,-4.041744 6.62733,-5.400138 6.44957,-2.977631 3.60533,1.641529 10.42139,-0.217363 z"></path> <path d="m 260.769,66.023156 c 3.8349,-4.788158 8.79324,-8.576249 12.7991,-13.224205 1.75034,-2.886256 3.43676,-4.132595 5.93865,-4.863527 1.36048,-1.366469 0.7359,-3.785632 1.10386,-5.678447 -0.76366,-0.838347 -1.35457,-2.029861 -2.22664,-2.646575 -0.99259,-0.08879 -2.12712,0.169001 -3.03839,-0.118352 -1.30495,-1.404354 -2.86845,-2.614797 -4.1339,-4.011836 -2.15241,-6.618271 -4.5275,-13.195742 -5.71384,-20.074944 -1.99173,-9.307097 -2.15055,-5.084229 -4.23803,-2.694703 -1.89331,2.261054 -3.97742,4.394485 -5.75197,6.734975 -2.17919,4.369109 -4.35839,8.738218 -6.53758,13.107327 -1.71492,1.11744 -3.42985,2.234883 -5.14477,3.352328 -1.4828,-0.470312 -2.96182,-1.251763 -4.44692,-1.533208 -4.79877,2.860083 -3.39481,-3.099681 -4.61322,-1.645561 -0.83557,0.646548 -3.16443,2.417752 -4.33214,2.171548 -2.60394,0.20477 -3.7511,-0.08068 -6.2436,-0.757161 -3.3e-4,1.040982 -0.36041,4.077489 1.15977,3.597984 1.14715,0.14345 2.47104,-0.492629 3.62131,0.0082 3.61471,1.043297 7.56377,3.356319 10.11497,7.322839 4.58458,7.718114 4.36102,8.17007 5.13813,13.923417 0.58204,4.309185 2.91437,2.859459 4.04981,4.539599 1.2544,1.856164 1.73521,3.698395 2.9847,6.021742 1.82746,3.202236 1.66695,4.37289 3.5547,4.410115 1.50738,0.02972 2.06302,-2.206341 2.97507,-3.406861 1.09428,-1.440386 1.85013,-3.122803 2.98093,-4.534694 z"></path> </svg> 

Answer 1

$("svg path").mouseenter(function() {
    $(this).attr("filter", "url(#f1)");
    polyhoveron.play();
    $("p").text("Mouse has entered");
}).mouseleave(function() {
    $(this).attr("filter", "url(#f2)");
    $("p").text("Mouse has left");
    setTimeout(function() {
        setTimeout(function() {
            $(this).removeAttr("filter");
            $("p").text("Why didn't removeAttr work? Now it's broken and can't be started over.");
        }, 500);
        polyhoveroff.play();
        $("p").text("<polyhoveroff function>")
    }, 500);
});

当你有添加属性时，这是（svg Path）的范围，但是在鼠标悬停之后，你是在两个嵌套的setTimeout后删除属性，那么这个范围将改为事件动作，意味着这不具有范围（svg路径） ）

因此，对于相同的情况，您需要将（svg path）实例存储到其他范围变量，这将使用该变量删除Attribute

$("svg path").mouseenter(function() {
    $(this).attr("filter", "url(#f1)");
    polyhoveron.play();
    $("p").text("Mouse has entered");
}).mouseleave(function() {
    var $this = this;
    $(this).attr("filter", "url(#f2)");
    $("p").text("Mouse has left");
    setTimeout(function() {
        setTimeout(function() {
            console.log($($this).attr('filter'));
            $($this).removeAttr("filter");
            console.log($($this).attr('filter'));

            $("p").text("Why didn't removeAttr work? Now it's broken and can't be started over.");
        }, 500);
        polyhoveroff.play();
        $("p").text("<polyhoveroff function>")
    }, 500);
});

Answer 2

settimout不会将$（this）标识为选择器：svg path

if i set    $("svg path").removeAttr("filter");

它会工作，你需要识别正确的元素选择器

因此，将其存储在var中以用于settimeout：

var $thisSVG = $(this);  

然后在播放之前重新启动动画：YourObject.restart（）;

然后微调延迟对不起它这一个https://codepen.io/anon/pen/EzORXE