l-emi l-emi - 7 months ago 26
Javascript Question

How to apply a jquery animation to a single item?

I don't know if I worded this correctly, but I am trying to get an item to shake using jquery when you hover over it. I managed to do this, but it shakes whenever you hover over the whole row. I want it to shake ONLY when you hover over the image.

Here's the HTML:

<div class="top-logo" align="center">
<span class="fa fa-magic fa-5x" aria-hidden="true"></span>
</div>


The javascript:

$('.top-logo').hover(function(){
if(!$(this).hasClass('animated'))
{
$(this).addClass('animated');
$(this).stop().effect('shake', {distance:3}, 200);
}
}, function(){
$(this).removeClass('animated');
});


Here's the full code: http://codepen.io/l-emi/pen/QNZevb

I tried using
display:inline-block
which works but moves the wand to the left while I want it to be centered.

Thanks for any help!

Answer

replace

$('.top-logo')

by

$('.top-logo span')