0

「タイトル」をアニメーション化しようとしているので、含まれているdivにカーソルを合わせると、フェードインし、10pxまでアニメーション化します。これには JavaScript が必要ですか、それとも CSS トランジションで実行できますか?

実際の例

HTML

<div class="thumb">
    <div class="content">
        <div class="copy">
             <h1>Title</h1>
        </div>
    </div>
</div>

JS

$('.content').hide().removeClass('content').addClass('content-js');

$('.thumb').hover(function () {
    $(this).find('.content-js').fadeToggle();
});
4

2 に答える 2

1

このフィドルを見てください: http://jsfiddle.net/aGcpR/15/これはこのコードです:

$(function() {
    $('.thumb').hover(
     function () {
        $('.copy h1').fadeIn(0).animate({'font-size':'20px'});
     },
     function () {
        $('.copy h1').animate({'font-size':'1px'}).fadeOut(0);
    });
});

見やすいようにタイトルを 20px にアニメーション化しましたが、20px と表示されている場所がわかります。.hover() は、2 つの関数を引数として取ります (つまり、カンマで区切ります)。最初の関数は mouseenter 時で、2 番目の関数は mouseleave 時です。このドキュメントを参照してください: http://api.jquery.com/hover/

その要素の font-size を 1px に設定し、最初から非表示にしていることに注意してください。

.copy h1 {
    font-size: 1px;
    display: none;
}
于 2013-05-20T22:38:01.677 に答える
0

複数の css3 トランジション (カンマ区切り) を追加できます。あなたの場合、不透明度と高さまたはフォントサイズのいずれかを使用します。

于 2013-05-20T22:27:34.153 に答える