Jquery not same hover as css

Question

I'm having some troubles with the hover method in jquery. I'm doing a svg and I'm trying to animate him.

The problem is that when I put my mouse hover the element it loops and never stop.

Here is my svg path:

<path id="test" d="M2,4 Q 5,6 8,4" />

Here is my jquery code:

$('#test').hover(function() {
    $('path#test').attr('d', "M2,4 Q 5,6 8,4");
 }, function () {
    $('path#test').attr('d', "M2,6 Q 5,4 8,6");
 });

https://jsfiddle.net/wwg93swz/

Here is the screen of the problem: And I would like like the :hover in CSS:

My css code for the second screen :

svg:hover #test {
  d: path("M2,6 Q 5,4 8,6");
}

I would like to do the same thing on JS.

Thans for your help.

Answer 1

You assigned the event on path (mouth) hover and the problem is whenever you put your mouse over it, than it moves and is no longer hovered. Do same as you did in your CSS, assign the hover event directly on svg:

$('svg').hover(function() {
    $('path#test').attr('d', "M2,4 Q 5,6 8,4");
}, function () {
    $('path#test').attr('d', "M2,6 Q 5,4 8,6");
});

Also on Updated Fiddle .