Как сделать эту вкладку оживленной с помощью jquery?

Question

Я хотел бы, чтобы эта вкладка одушевленные, когда парил над

До:

На парении:

Как идти об этом с JQuery?

<div class="recruiterLink"> 
<a href="http://mydomain.com/recruiter/"> 
<span>Recruiting?</span> 
<br> 
Advertise a vacancy » 
</a> 
</div> 

Спасибо!

Answer 1

Я бы так:

$(".recruiterLink").hover(function(){ 
$(this).stop().animate({"top" : "-20px"}); 
}, function(){ 
$(this).stop().animate({"top": "0"}); 
}); 

Это означает, что ваш div.recruiterLink должен иметь позиционирование

.recruiterLink 
{ 
    position: relative; 
} 

Answer 2

это может быть стартером, что вы ищете:

$(document).ready(function() { 

    $('#tab-to-animate').hover(function() { 

     // this anonymous function is invoked when 
     // the mouseover event of the tab is fired 

     // you will need to adjust the second px value to 
     // fit the dimensions of your image 
     $(this).css('backgroundPosition', 'center 0px'); 

    }, function() { 

     // this anonymous function is invoked when 
     // the mouseout event of the tab is fired 

     // you will need to adjust the second px value to 
     // fit the dimensions of your image 
     $(this).css('backgroundPosition', 'center -20px'); 

    }); 

}); 

извините неправильно вопрос этого код должен делать переместить DIV в целом при условии, что вы его толкнули вниз первоначально используя положение: относительный css свойство.

$(document).ready(function() { 

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

     $(this).css({ 
      'position' : 'relative', 
      'top' : 0 
     }); 

    }, function() { 

     $(this).css({ 
      'position' : 'relative', 
      'top' : 20 
     }); 

    }); 

}); 

Answer 3

HTML

<div class="recruiterLink"> 
<a href="http://mydomain.com/recruiter/"> 
<span>Recruiting?</span> 
<div class="hover-item" style="display:none;">Advertise a vacancy »</div> 
</a> 
</div> 

JQuery:

$(".recruiterLink").hover(function() { 
    $(this).find(".hover-item").toggle(); 
}, 
function() { 
    $(this).find(".hover-item").toggle(); 
}); 

Вы можете также добавить некоторые эффекты анимации, если вы хотите.