jquery - 如何使用 jquery 使该选项卡具有动画效果？

Question

我希望此选项卡在悬停时具有动画效果

之前:

悬停时:

我该如何使用 jquery 来解决这个问题？

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

谢谢!

Answer 1

这可能是您正在寻找的内容的开始:

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

    });

});

抱歉误读了这个问题，假设您最初使用position:relative css属性将div向下推，这段代码应该将div作为一个整体移动。

$(document).ready(function() {

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

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

    }, function() {

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

    });

});