0

だから、これがばかげた質問ではないことを願っていますが、私は多くの解決策を探していましたが、何も見つからないようです. 「About」、「Portfolio」、「Blog」、および「Contact」という言葉とともにインラインで表示されるナビゲーション リストを含むサイトを作成しています。jQuery でアニメーション化して、マウスを置いたときにテキストが入っているコンテナーを .75rem 下に拡張し、マウスを離すと .75rem に戻ります。

$(document).ready(function() {
   $('#nav ul li a').mouseenter(function() {
       $(this).animate({
           height: '+=.75rem'
       });
   });
   $('#nav ul li a').mouseleave(function() {
       $(this).animate({
           height: '-=.75rem'
       }); 
   });
});

これが私のhtmlです：

 `    <div id="nav">
        <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

私が知りたいのは、コンテナが拡張されたときに実際のテキストを下に拡張する方法があるかどうかです。マウスオーバーするとテキストが引き伸ばされ、元のサイズのテキストに戻ります。これは私がここで尋ねた最初の質問なので、何か間違ったことをした場合は事前に謝罪させてください. 助けてくれてありがとう！！AJ

4

2 に答える 2

1

jquery animate 関数を使用して、フォント サイズをアニメーション化できます。

$(document).ready(function () {
        $('#nav ul li a').mouseenter(function () {
            $(this).animate({
                height: '+=.75rem',
                fontSize: '+=.75rem'
            });
        });
        $('#nav ul li a').mouseleave(function () {
            $(this).animate({
                height: '-=.75rem',
                fontSize: '-=.75rem'
            });
        });
    });
于 2013-11-08T18:50:26.967 に答える