如何使用 jquery 制作此选项卡动画？

Posted 2023-05-08

【中文标题】如何使用 jquery 制作此选项卡动画？

【英文标题】：How do I make this tab animate up with jquery?

【发布时间】：2011-05-13 17:59:33

【问题描述】：

我想让这个标签在悬停时动画

之前：

悬停时：

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

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

谢谢！

【参考方案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 向下推。

$(document).ready(function() 

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

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

    , function() 

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

    );

);

【讨论】：

第二个代码的 position: relative 是重复的 - 您可以将其移到 hover 函数之外。

能否详细说明为什么 position: relative 是重复的？

因为可以用css设置

如何添加动画？谢谢

【参考方案2】：

我会走这条路：

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

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

.recruiterLink

    position: relative;

【讨论】：

如果 div.recruiterLink 是绝对定位的，这仍然有效吗？

是的！如果它是相对的或绝对的，它将起作用。但是你应该在菜单周围有一个包装器，位置相对，所以按钮不会绝对定位到页面，而是定位到它的包装器。

【参考方案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();
);

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

【讨论】：

您可以使用hover(handlerInOut(eventObject)) 表单，因为两个回调是相同的。