2

I'm learning JavaScript and got a simple problem here: I want to trigger an CSS animation (Spin the blue nut) when another element is hovered via JavaSript ONLY.

This is what I've got so far, and I don't know what I'm missing in this snippet:

$('#menu').hover(
  function () {
    $('#nut').addClass('spin');
  },
  function () {
    $('#nut').removeClass('spin');
  }
);
#nut {
    transform-origin: center center;
    transform-style: preserve-3D;
    transition: all 1s ease;
}

.spin {
  transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="menu" x="0px" y="0px" width="71.39px" height="71.39px" viewBox="0 0 71.39 71.39" enable-background="new 0 0 71.39 71.39" xml:space="preserve">
  <polygon id="nut" fill="#0000ff" points="66.605,53.541 35.694,71.388 4.784,53.541 4.784,17.849 35.694,0.002 66.605,17.849"/>
</svg>

I really appreciate your help! Thanks in advance!

user229044
  • 232,980
  • 40
  • 330
  • 338
ermac
  • 428
  • 1
  • 5
  • 13

1 Answers1

4

The only thing missing is jquery. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<svg id="menu" x="0px" y="0px" width="71.39px" height="71.39px" viewBox="0 0 71.39 71.39" enable-background="new 0 0 71.39 71.39" xml:space="preserve">
  <polygon id="nut" fill="#0000ff" points="66.605,53.541 35.694,71.388 4.784,53.541 4.784,17.849 35.694,0.002 66.605,17.849"/>
</svg>

Take a look at this code working here:

https://jsfiddle.net/j2bon1gc/

Actually it not only lacked Jquery, but in order to work it specially lacked a jquery version greater than 2.2, which was the version that implemented this feature.

Take a look here: jQuery SVG, why can't I addClass?

And in the Meta question I opened for this: Why isn't jQuery working in this question's code snippet?

Community
  • 1
  • 1
Nelson Teixeira
  • 6,297
  • 5
  • 36
  • 73