jquery - 加载时，所有文本字体大小 : then back 增大 1px

Question

我希望将所有文本都包含在我的文档中.. <p>标签，无 <p>标签，<span> ，所有的 h h1,h2,h3,h4等在 font-size: 中增加 1 个额外像素(来自样式表中的样式)仅 .5秒或 1第二。 + 1px然后恢复到原始布局样式大小。

注意:此外，必须有平滑过渡的选项。

Answer 1

您必须循环元素才能仅使用一个像素来执行此操作:

$('h1, h2, h3, h4, h5, h6, p').each( function () {
   var $e = $(this);

    var size = parseInt($e.css('font-size'), 10);

    $e.css('font-size', (size + 1) + 'px');

    window.setTimeout(function () {
        $e.css('font-size', size + 'px');
    }, 1000);

    $e.html(size);
});

See this running .

使用相对字体大小设计页面，然后将body字体调整1px会更高效一点。

您可以使用以下方法平滑过渡:

h1, h2, h3, h4, h5, h6, p  {
    transition: all 0.5s ease;
}

警告 - 如果您在大量文本上使用此功能，浏览器可能会难以平滑地重排页面(即，它看起来会比仅 1 像素的偏移更加锯齿状)。