3

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/

4

1 に答える 1

1

divアニメーションでのみを選択したい場合はありますか? スクリプトをこのように変更すると、望ましい結果が得られますか?

$('.gbox').hover(
    function() { $(this).children().animate({height: '+=10px'}, 200) },
    function() { $(this).children().animate({height: '-=10px'}, 200) }
);
于 2013-09-24T22:09:27.480 に答える