Wie mache ich diesen Tab mit jquery animieren?

Question

Ich möchte diese Registerkarte belebter haben, wenn über

Vor schwebte:

auf schweben:

Wie gehe ich darüber mit jquery?

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

Vielen Dank!

Answer 1

ich diesen Weg gehen würde:

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

Dies bedeutet, dass Ihr div.recruiterLink eine Positionierung

.recruiterLink 
{ 
    position: relative; 
} 

Answer 2

dies ein Starter sein könnte, was Sie suchen:

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

    }); 

}); 

leider dieser Code die Frage falsch verstanden tun sollten, vorausgesetzt, die div als Ganzes bewegen, dass man es zunächst die Position unter Verwendung geschoben haben nach unten: relative CSS-Eigenschaft.

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

Sie können auch einige Animationseffekte hinzufügen, wenn Sie möchten.