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

Question

我正在尝试实现一个相当简单的动画，其中标题和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/

Answer 1

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

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