更新

Question

我已经搜索了各种示例，但我似乎无法获得所需的效果在我的主页上，我有一个h1标题。

我正在尝试使用JQuery创建淡入淡出效果。当页面加载时，我希望h1标题缓慢淡入（甚至可能从小字体变为大字）

任何人都可以帮助解决这些问题。道歉，我刚才说出来了？

非常感谢， P

Answer 1

看看这个jsfiddle 如果你同时淡化并改变字体大小，我认为它会更顺畅。

另外，请参阅代码底部的1000？这就是动画时间，你可以改变它以获得更快或更慢的性能。

$(document).ready(function(){
    $("h1").animate({ 
        'font-size' : '40px',
        'opacity': '1'
    },1000);
});

Answer 2

当dom加载时（或者如果你正在下载/渲染数据有效载荷），jQuery.fadein（）动画有时会变得不稳定。多年来可能会变得更好但是嘿......这是$ -free解决方案：

h1 {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

Answer 3

请参阅下面的输出或fiddle

＆＃13;

  $(document).ready(function(){
    $("h1").fadeIn("slow").animate({ fontSize : '40px' });
    
    })

＆＃13;

      h1{display:none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello</h1>

＆＃13;

Answer 4

理论上，默认情况下您需要显示<h1>，以防最终用户没有安装Javascript，但会被<head></head>标记之间调用的Javascript隐藏，以便隐藏它在页面加载之前。将其余的Javascript放在</body>标记之前，以便最后加载。

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="doFirst.js"></script>
  </head>
  <body>
    <h1 class='title'>My Title</h1>
    <!-- page content -->
    <script src="doLast.js"></script>
  </body>
</html>

doFirst.js

$(document).ready(function(){
  $("h1.title").hide();
});

使用hide()功能隐藏元素。

doLast.js

$(document).ready(function(){
  $("h1.title").fadeIn(3000);
});

使用fadeIn()功能控制淡入淡出。数字表示以毫秒为单位的渐变速度。

直播example on JSFiddle。

更新

您也可以使用CSS3执行此操作。

See how to fade in CSS

See how to grow font in CSS

h1使用Jquery淡化效果

4 个答案:

的index.html

doFirst.js

doLast.js

更新