如何在保持绝对定位的同时对依赖于其他元素的文本进行动画处理

Posted 2023-03-06

【中文标题】如何在保持绝对定位的同时对依赖于其他元素的文本进行动画处理

【英文标题】：How to animate text dependent on other element while maintaining absolute positioning

【发布时间】：2013-09-30 07:59:49

【问题描述】：

我正在尝试实现一个相当简单的动画，其中标题和div 在悬停时向上移动。问题是div 有一个透明度设置，这意味着标题必须放在它的外面才能不依赖于不透明度。所以现在标题没有随着盒子移动。我应该对元素进行分组还是更改 html/CSS 结构？

HTML：

<a class="gbox a2" href="#">
    <div></div>
    <h2>TITLE</h2>
</a>

CSS：

.gbox       border:1px solid #aaa; position:relative;
.gbox div   background:#ddd; opacity:0.75; height:80px; position:absolute; bottom:0; width:100%
.gbox h2    position:absolute; right:20px; bottom:12px; color:#000
.a2         width:338px; height:194px; background:#333; display:inline-block

JavaScript：

$('.gbox').hover(
    function()  $(this).children('div').animate(height: '+=10px', 200) ,
    function()  $(this).children('div').animate(height: '-=10px', 200) 
)

http://jsfiddle.net/YS2s9/

【问题讨论】：

基于这里的HTML，你能不能只在div上使用rgba背景色，然后将h2放在div里面？

【参考方案1】：

是否存在您特别想在动画中仅选择 div 的实例？对您的脚本进行这种修改会产生预期的结果吗？

$('.gbox').hover(
    function()  $(this).children().animate(height: '+=10px', 200) ,
    function()  $(this).children().animate(height: '-=10px', 200) 
);

【讨论】：

所以分组是要走的路。谢谢！

在这种情况下，是的，这将是最合适的方式；）