CODEWITHSUNDEEP
jqueryhoverjquery-animate
Anthony
Anthony

Reputation: 667

How do I make this tab animate up with jquery?

I would like to have this tab animate when hovered over

Before:before

On hover:after

How do I go about this with jquery?

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

Thanks!

Upvotes: 3

Views: 7372

Answers (3)

Flipke
Flipke

Reputation: 971

I would go this way : 

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

This means your div.recruiterLink should have a positioning 

.recruiterLink
{
    position: relative;
}

Upvotes: 3

kgiannakakis
kgiannakakis

Reputation: 104188

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

You can also add some animation effects, if you want.

Upvotes: 1

Simon H
Simon H

Reputation: 1745

this could be a starter of what you are looking for:

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

    });

});

sorry misread the question this code should do move the div as a whole assuming that you have it pushed down initially using the position: relative css property.

$(document).ready(function() {

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

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

    }, function() {

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

    });

});

Upvotes: 5

Related Questions