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？您对脚本的这种修改是否会产生所需的结果？

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

如何在保持绝对定位的同时为依赖于其他元素的文本制作动画

1 个答案: