У меня есть две функции 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>
1
WebMW 31 Май 2019 в 09:30

2 ответа

Лучший ответ

Settimout не идентифицирует $ (this) как селектор: svg path

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

Это будет работать, вам нужно определить правильный элемент выбора

Так что сохраните это в переменной, чтобы использовать для settimeout:

var $thisSVG = $(this);  

Затем перезапустите анимацию перед ее воспроизведением: YourObject.restart ();

Затем настройте задержку извините, это https://codepen.io/anon/pen/EzORXE

1
Gabriel 31 Май 2019 в 09:22
$("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 path ) ,

Так что для того же самого вам нужно сохранить (путь svg) другой переменной области, это удалить атрибут с помощью этой переменной

$("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);
});
3
Nitin Sharma 31 Май 2019 в 07:02