如何使用jquery使此选项卡动画显示?

时间:2010-11-22 09:53:56

标签: jquery hover jquery-animate

我希望在悬停在

上时让此标签动画显示

在:before

悬停时:after

我如何使用jquery进行此操作?

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

谢谢!

3 个答案:

答案 0 :(得分:5)

这可能是您正在寻找的东西的开端:

$(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属性将其推下来。

$(document).ready(function() {

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

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

    }, function() {

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

    });

});

答案 1 :(得分:3)

我会这样:

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

这意味着你的div.recruiterLink应该有一个定位

.recruiterLink
{
    position: relative;
}

答案 2 :(得分:1)

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

如果需要,您还可以添加一些动画效果。