1

I've got two setTimeout functions that are operating properly but my removeAttr function is not firing. I have no idea why this is.

EDIT: The actual goal is to animate feGaussianBlur's variable "stdDeviation" from 0 to 7 on mouse in.... and 7 to 0 on mouse out... not just once, but an unlimited number of times. While the first path object is still animating, the second path object should also be able to animate separately.

Below is my code but because I'm using a plugin, please follow this link to 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>
WebMW
  • 420
  • 2
  • 11
  • 24
  • do you want to remove `filter` completely? – Udhay Titus May 31 '19 at 06:49
  • @UdhayTitusP Yeah, just temporarily until the next hover takes place, even on other path objects. Reasoning is that the same filter object cannot work on more than one path at a time-- that's why I'm inserting a delay. Not sure it's the perfect approach, but I haven't been able to find out yet because removeAttr isn't being removed. – WebMW May 31 '19 at 06:56
  • did you tried this `$('svg defs filter').empty();` or explain the question little more – Udhay Titus May 31 '19 at 06:58
  • I just tried your suggestion now, but it seems to make the path disappear. All I'm trying to do is remove the filter attribute from the hovered paths, so I can animate feGaussianBlur over and over on any path. – WebMW May 31 '19 at 07:03
  • `this` in the delayed function is not what you think it is. – Teemu May 31 '19 at 07:03
  • Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – Grundy May 31 '19 at 08:20

2 Answers2

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

When you have adding attribute at that this is the scope of (svg Path), But after mouseover, You are trting to remove attribute after two nested setTimeout, then this scope will change to event action, Mean this has not scope of (svg path),

so for the same you need to store (svg path) instance to other scope variable, this remove Attribute by using that variable

$("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);
});
Nitin Sharma
  • 411
  • 3
  • 11
  • Wow, so I must reset "this" on each mouse leave? That makes sense and removes the attribute, but the animation still is broken.... I believe this answer also satisfies the question but would you happen to know why my animation is still broke afterwards? – WebMW May 31 '19 at 07:12
  • Could you please explain me what do you, wants to do exactly – Nitin Sharma May 31 '19 at 07:37
  • Absolutely! The goal I probably should have specified in the OP is to animate feGaussianBlur's variable "stdDeviation" from 0 to 7 on mouse in.... and 7 to 0 on mouse out... not just once, but an unlimited number of times. While the first path object is still animating, the second path object should also be able to animate separately. Is this something you could help me out with? – WebMW May 31 '19 at 07:44
1

the settimout does not identify $(this) as the selector : svg path 

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

it would work , you need to identify the right element selector

So Store this in a var to use for the settimeout:

var $thisSVG = $(this);

then restart the animation before you play it : YourObject.restart();

then fine tune the delay sorry its this one https://codepen.io/anon/pen/EzORXE

Gabriel
  • 86
  • 4
  • Wow, that makes sense and removes the attribute, but the animation still is broken.... I think this might be another issue but do you have an idea? – WebMW May 31 '19 at 07:05
  • This definitely "force removes" the attribute (from all paths), but it also would remove "all filters" and therefore any animation taking place on other paths at the same time. Plus, the animation still is broken.... which is another issue but would you happen to have an idea? – WebMW May 31 '19 at 07:20
  • answer to question 2 - store your DOM element in a var: var $this = $(this)//question 1 ill have to dive in a bit but i can see you dont have an animate tag for svg .. here are some resources to take a look at quick ---https://jsfiddle.net/kyL24uaf/ , https://css-tricks.com/guide-svg-animations-smil/ – Gabriel May 31 '19 at 07:31
  • you need to restart the effect : polyhoveron.restart(); change the delay to make its smooth : polyhoveroff.restart(); add before you play : change delay options , check the docs here : https://greensock.com/docs/TweenMax – Gabriel May 31 '19 at 08:03
  • Gabriel, I see your update and have been trying to figure out what you mean. Still looking for a solution to my real issue. Would it be possible if you could fork the Codepen? I would sincerely appreciate your help on this. – WebMW May 31 '19 at 08:19
  • 1
    I am going to mark this as best answer for not only answering the actual question in the OP but because of your additional help. I was able to get this even more streamlined @ https://codepen.io/ownage/pen/NVeRMJ ... super clean and awesome. Thank you! – WebMW Jun 01 '19 at 03:20