jQuery анимированный заголовок при зависании

Question

Я нашел здесь полезную часть кода. Я очень надеюсь, что кто-то может мне помочь.

Вот код:

$(function(){ 
    $('#header_nav').data('size','big'); 
}); 

$(window).scroll(function(){ 
    if($(document).scrollTop() > 0) 
    { 
     if($('#header_nav').data('size') == 'big') 
     { 
      $('#header_nav').data('size','small'); 
      $('#header_nav').stop().animate({ 
       height:'40px' 
      },600); 
     } 
    } 
    else 
    { 
     if($('#header_nav').data('size') == 'small') 
     { 
      $('#header_nav').data('size','big'); 
      $('#header_nav').stop().animate({ 
       height:'100px' 
      },600); 
     } 
    } 
}); 

http://jsfiddle.net/JJ8Jc/76/

Вопрос: Как сделать то же самое, только при наведении курсора мыши (не прокручивать)?

Большое спасибо.

Answer 1

Это намного проще, чем вы думаете.

(1) $('#header_nav').data('size','small'); 

В отношении (1), точный фрагмент кода, который вы вставили на самом деле просто добавление данных-атрибут, который я предполагаю, что вам не нужно, как вы нашли код в Интернете.

(2) $('#header_nav').stop().animate({ 

В отношении (2), .stop() как раз останавливаю одушевленный резко, не позволяя ему закончить

Ключом является целевым событием мыши, входящей в DIV показан ниже:

$("#header_nav").mouseenter(function(){ 

, а затем еще раз, когда он уходит, чтобы дать вам эффект показано ниже курсора, находящегося:

$("#header_nav").mouseleave(function(){ 

Я раздел код, чтобы сделать его как можно более простым для вас читать (DEMO ниже)

DEMO

Это говорит само за себя, на MouseEnter/MouseLeave «одушевленный» (постепенно уменьшить/увеличить) высота контейнера.