0

Using Jquery in rails but having issues with the addClass method.

Not sure why my add class is not working. The "on" and "hover off" are working fine in the console.

I tried to get the animations working on JSfiddle and was able to but theThe animations still wont work on my local even when i copy and paste the code in. Let me know if you have any suggestions... thanks.

Working JS Fiddle of what I want

Even though it works in the JS fiddle, the same code doesn't work in local.

MY Code:

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="fb-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 298.6" style="enable-background:new 0 0 300 298.6;" xml:space="preserve">
<circle class="social-circle" cx="150" cy="153.2" r="141.4"/>
<path class="social-path" d="M123.9,203c0-15.7,0-31.3,0-47c0-2.5-0.5-3.6-3.3-3.4c-4.9,0.2-9.8,0-14.7,0.1c-1.9,0-2.8-0.3-2.8-2.5
    c0.1-9.8,0.1-19.5,0-29.3c0-2.2,0.8-2.6,2.7-2.5c5.1,0.1,10.2-0.1,15.3,0.1c2.2,0.1,2.8-0.6,2.8-2.8c-0.1-7.5-0.1-15.1,0-22.6
    c0.1-8.4,2.2-16.3,6.7-23.4c6.8-10.7,17.2-15.6,29.4-16.1c11.4-0.5,22.9-0.2,34.3-0.3c1.9,0,2.2,0.8,2.2,2.4c0,9.8-0.1,19.5,0,29.3
    c0,2-0.8,2.4-2.6,2.3c-5.5-0.1-11.1-0.1-16.7,0c-6.9,0-11.4,3.6-11.9,10.4c-0.5,6.2-0.2,12.4-0.3,18.6c0,2,1.3,1.7,2.5,1.7
    c8.3,0,16.7,0.2,25-0.1c3.1-0.1,3.7,0.9,3.4,3.8c-1.1,9.6-1.9,19.2-2.8,28.8c-0.2,2.1-1,2.7-3.1,2.7c-7-0.1-14,0.1-21-0.1
    c-2.8-0.1-3.5,0.8-3.5,3.5c0.1,30.9,0,61.7,0.1,92.6c0,3.1-0.6,4.1-3.9,4.1c-11.7-0.2-23.3-0.2-35,0c-2.5,0-3.1-0.7-3.1-3.1
    C124,234.4,123.9,218.7,123.9,203z"/>
</svg>

SCSS

svg{
  height: 60px;
  width: 60px;


  .social-circle {
    fill: none;

  }

  .movingCirc {
        stroke-width: 10;
        stroke: blue;
        stroke-dasharray: 900;
        -webkit-animation: dash-circ 2s ease-in-out ;
         animation: dash-circ 2s ease-in-out;
  }

  .social-path {
    fill: none;
    stroke-width: 10;
    stroke: blue;
    stroke-dasharray: 615;
    -webkit-animation: dash 4s linear infinite;             animation: dash 4s linear infinite;

  }
}
  @keyframes dash {
   from{
     stroke-dashoffset:615;
   }
   to{
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash-circ {
   from{
     stroke-dashoffset:900;
   }
   to{
      stroke-dashoffset: 0;
    }
  }

jquery

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
      $(this).find('circle').addClass('movingCirc');
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').removeClass('movingCirc');
    console.log("hover off");
  });
});

I imported the Jquery file and the SCSS file in my tree.

like i said, in the console I can see the "on" and "hover off" when i hover the SVG, but the class is not added.

Zlerp
  • 467
  • 7
  • 16
  • 1
    http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass – Lalji Tadhani Jan 19 '16 at 18:15
  • THank you very much!!! this worked perfectly... I wonder why it worked on the JS Fiddle then?? oh well. Thanks for your quick response anyways!!! – Zlerp Jan 19 '16 at 18:22
  • It probably worked on the JS Fiddle because it's using jQuery 1.12 - which added support for class manipulation with svgs - If you're using less than 1.12 or 2.2 then it doesn't work. You can read more - https://blog.jquery.com/2016/01/08/jquery-2-2-and-1-12-released/ – Thomas Walpole Jan 19 '16 at 18:36

1 Answers1

0

jQuery doesnt add classes to SVGs so instead I had to change the attributes like so:

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
      $(this).find('circle').attr("class", "social-circle movingCirc");
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').attr("class", "social-circle");
    console.log("hover off");
  });
});

Thanks Lalji Tadhani for the help.

Community
  • 1
  • 1
Zlerp
  • 467
  • 7
  • 16