0

所以，我希望这不是一个愚蠢的问题，但我一直在寻找一些解决方案，但似乎找不到任何东西。我正在创建一个带有导航列表的网站，该列表内嵌显示“关于”、“投资组合”、“博客”和“联系方式”等字样。我在 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>

我想知道的是，是否有办法让实际文本在其容器出现时向下延伸。当您将鼠标悬停在文本上时，我想让文本向下拉伸，然后返回到原始大小的文本。这是我在这里提出的第一个问题，所以如果我做错了什么，请提前道歉。谢谢您的帮助！！阿杰

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 回答
0

你也可以试试css3。沿着这些思路，

CSS

a.stretch{
    transition : .4s linear;
    display: inline-block;
    transform: scale(1, 3);
    -webkit-transform: scale(1, 3);
    -moz-transform: scale(1, 3);
    -ms-transform: scale(1, 3);
    -o-transform: scale(1, 3);
}

JS

    $(document).ready(function () {
    $('#nav ul li a').mouseenter(function () {
        $(this).parent('li').stop(false,true).animate({
            height: '+=.75rem'
        });
        $(this).addClass("stretch");
    });
    $('#nav ul li a').mouseleave(function () {
        $(this).removeClass("stretch");
        $(this).parent('li').stop(false,true).animate({
            height: '-=.75rem'
        });
    });
});

http://jsfiddle.net/Nk7SD/1/

于 2013-11-08T18:57:01.747 回答