JQuery Hover не работает в Firefox или IE

Question

Я новичок в Javascript/Jquery, так что легко!

Я создал то, что будет вкладом HTML facebook, с некоторыми изображениями и применил эффект наведения, чтобы они расширялись по мере того, как мышь зависала. Это похоже на работу в Chrome, но в Firefox и IE это глючит, и анимация, кажется, работает многократно, если курсор не находится в центре изображения.

Я попытался добавить «stop()» там, но либо он не работает, либо я помещаю его в неправильное место (возможно, последнее). Если у кого-то есть предложения, я буду очень благодарен!

<script> 
    $(document).ready(function() { 

    $('.circle').hover(function() { 

     $(this).animate({ 
      'position' : 'relative', 
      'width' : 120, 
      'height' : 120, 
      'border-radius' : 60, 
      'margin' : 20, 
      'top' : 0, 

     }); 

    }, function() { 

     $(this).animate({ 
      'position' : 'relative', 
      'width' : 100, 
      'height' : 100, 
      'margin' : 25, 
      'top' : 10, 
     }); 

    }); 

}); 
</script> 

Полный пример можно найти здесь:

http://careers.dept.shef.ac.uk/Facebook/FacebookTab.html

Спасибо заранее.

Answer 1

Вы можете использовать функцию e.stoppropagation(), чтобы остановить пузыри.

Например. stoppropagation

<div id="noStop"> 
    <span>This one doesn't stop bubbling</span> 
    <ul></ul> 
    </div> 
    <div id="stop"> 
    <span>This one stops bubbling</span> 
    <ul></ul> 
    </div>