I am trying to make an image rotate when you hover over certain items on the page. It uses the solution provided here (with edits for my purposes): http://stackoverflow.com/a/10235298.  You can see an example of what I am trying to achieve here: https://jsfiddle.net/t100gq25/

HTML:

1. <div class="container">
2.       <a href="#" class="menu-1">
3.         <img src="http://placehold.it/140x35&text=4" class="animation-trigger">
4.       </a>
5. 
   
6.       <a href="#" class="menu-2">
7.         <img src="http://placehold.it/140x35&text=1" class="animation-trigger">
8.       </a>
9. 
   
10.       <a href="#" class="menu-3">
11.         <img src="http://placehold.it/140x35&text=3" class="animation-trigger">
12.       </a>
13. 
    
14.       <a href="#" class="menu-4">
15.         <img src="http://placehold.it/140x35&text=2" class="animation-trigger">
16.       </a>
17. 
    
18.       <img src="https://image.freepik.com/free-icon/arrow-full-shape-pointing-to-right-direction_318-32063.png" class="arrow">
19. </div>

JavaScript (dependent on jQuery):

1. $(function () {
2.   var img = $('.arrow');
3. 
   
4.   if (img.length > 0) {
5.     var offset = img.offset();
6. 
   
7.     $('.animation-trigger').mouseenter(function (event) {
8.       var element = $(this);
9.       var elementPosition = element.offset();
10.       var elementX = elementPosition.left + (element.width() / 2);
11.       var elementY = elementPosition.top + (element.height() / 2);
12.       var imgX = offset.left + (img.width() / 2);
13.       var imgY = offset.top + (img.height() / 2);
14.       var radians = Math.atan2(elementX - imgX, elementY - imgY);
15.       var degrees = (radians * (180 / Math.PI) * -1) + 90;
16. 
    
17. 
    
18.       img.css('-moz-transform', 'rotate(' + degrees + 'deg)')
19.         .css('-webkit-transform', 'rotate(' + degrees + 'deg)')
20.         .css('-o-transform', 'rotate(' + degrees + 'deg)')
21.         .css('-ms-transform', 'rotate(' + degrees + 'deg)');
22.     });
23.   }
24. });

CSS:

1. body {
2.   padding-top: 150px;
3. }
4. 
   
5. .container {
6.   height: 500px;
7. }
8. 
   
9. .menu-1,
10. .menu-2,
11. .menu-3,
12. .menu-4 {
13.   position: absolute;
14.   z-index: 99
15. }
16. 
    
17. .menu-1 {
18.   top: 20%;
19.   left: 20%;
20. }
21. 
    
22. .menu-2 {
23.   top: 20%;
24.   right: 20%;
25. }
26. 
    
27. .menu-3 {
28.   bottom: 20%;
29.   left: 20%;
30. }
31. 
    
32. .menu-4 {
33.   bottom: 20%;
34.   right: 20%;
35. }
36. 
    
37. .arrow {
38.   position: absolute;
39.   top: 50%;
40.   left: 50%;
41.   margin-top: -100px;
42.   margin-left: -100px;
43.   height: 200px;
44.   width: 200px;
45. 
    
46.   -webkit-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
47.   -moz-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
48.   -o-transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
49.   transition: all 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
50. }

It works great! However if you hover over link 1, the arrow will turn to it and then you decide to hover over link 4 and the arrow will again point to it. However it goes all the way around (clockwise) instead of taking the short route of just spinning back(anti-clockwise).

I've had a go at a few attempts but none have worked and if I come up with an idea that could work it's extremely long winded. I'm struggling to work out the best way to approach this so any help would be very much appreciated. 

Please note the jsfiddle is a quick mock up example of what I am trying to achieve. Unfortunately I cannot share the actual source code due to client confidentiality. Any solutions provided I will apply to the final site.

Many thanks:)