Question

here is my old code which works:

$('.logo').hover(function(){
  $(this).addClass('animated swing')},
  function(){$(this).removeClass('animated swing')
});   

here is my new code that im trying to refactor. the problem is its adding the classes “animated swing” when the page loads (without me hovering over the logo).

$('.logo').on('hover').toggle( function() { $(this).toggleClass('animated swing') });  

it also wont play beyond the first time

Answer 1

You must change your code. on takes 2 arguments, the event and the function to be executed. It should be something like this:

$('.logo').on('hover', 
    $(this).toggle( function() { $(this).toggleClass('animated swing') });
);

When you use .on(‘hover’).toggle(…) in reality you are passing the element forward instead of applying that function to the ‘hover’ listener, so it gets executed as it is interpreted (thus triggering the animation as soon as that line is interpreted instead of waiting for the mouse hover event).