Comment faire pour que cet onglet s'anime avec jquery?

Question

Je voudrais avoir cet onglet Animer lorsque planait sur

Avant:

En vol stationnaire:

Comment puis-je aller à ce sujet avec jquery?

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

Merci!

Answer 1

J'aller dans cette voie:

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

Cela signifie que votre div.recruiterLink doit avoir un positionnement

.recruiterLink 
{ 
    position: relative; 
} 

Answer 2

cela pourrait être une entrée de ce que vous recherchez:

$(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'); 

    }); 

}); 

mauvaise lecture désolé la question de ce code devrait faire passer la div dans son ensemble en supposant que vous l'avez poussé vers le bas en utilisant d'abord la position: relative propriété 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(); 
}); 

Vous pouvez également ajouter des effets d'animation, si vous voulez.