Question

在rails中使用Jquery但是在使用addClass方法时遇到了问题。

不确定为什么我的添加类无效。＆＃34; on＆＃34;并且＆＃34;徘徊在＆＃34;在控制台中工作正常。

我试图将动画制作成JSfiddle，但是即使我复制并粘贴代码，动画仍然无法在我的本地工作。如果您有任何建议，请告诉我。谢谢。

即使它在JS小提琴中有效，但相同的代码在本地不起作用。

我的代码：

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

我在树中导入了Jquery文件和SCSS文件。

就像我说的那样，在控制台中，我可以看到＆＃34; on＆＃34; 和＆＃34;在我悬停时 off＆＃34; SVG，但没有添加课程。

Answer 1

jQuery不会向SVG添加类，因此我必须更改属性，如下所示：

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

感谢Lalji Tadhani提供帮助。

项目

1 个答案: