Как применить jquery-анимацию к одному элементу?

Question

Я не знаю, правильно ли сформулировал это, но я пытаюсь получить элемент, который трясет, используя jquery, когда вы наводите на него курсор. Мне удалось это сделать, но он трясется всякий раз, когда вы нависаете над всей строкой. Я хочу, чтобы он дрожал ТОЛЬКО, когда вы наводили на изображение.

Вот HTML:

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

Javascript:

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

Вот полный код: http://codepen.io/l-emi/pen/QNZevb

Я попытался с помощью display:inline-block, который работает, но перемещает палочку влево, I хотите, чтобы он был центрирован.

Спасибо за помощь!

Answer 1

заменить

$('.top-logo') 

по

$('.top-logo span') 

Answer 2

$('.top-logo').hover(function(){ 
    $(this).toggleClass('animated'); 
    $("span", this).stop().effect('shake', {distance:3}, 200); 
}); 

$("span", this) или $(this).find("span") должно помочь, поскольку вы пытаетесь предназначаться это ребенок "span"