jQuery的页面加载动画不能正常工作

Question

我试图运行在页面加载的动画，但它不工作，我改变在页面加载与字体大小不透明度和其没有显示出效果

$(".animation").animate({opacity: 0.1, font-size:20px}, 1500); 
 
$(".animation").animate({opacity: 0.5, font-size:30px}, 500); 
 
$(".animation").animate({opacity: 0.9, font-size:40px}, 100);

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

Answer 1

你忘记引号

$(".animation").animate({"opacity": "0.1", "font-size":"20px"}, 1500); 
 
    $(".animation").animate({"opacity": "0.5", "font-size":"30px"}, 500); 
 
    $(".animation").animate({"opacity": "0.9", "font-size":"40px"}, 100);

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

Answer 2

$(document).ready(function() { 
    $(".animation").animate({opacity: 0.1, 'font-size':'20px'}, 1500); 
    $(".animation").animate({opacity: 0.5, 'font-size':'30px'}, 500); 
    $(".animation").animate({opacity: 0.9, 'font-size':'40px'}, 100); 
}); 

你需要把CSS属性名称加上引号，因为它们含有特殊（破折号）字符。

Answer 3

您对font-size和px值都有问题。

入住这里：

$(function() { 
 
    $(".animation").animate({opacity: 0.1, fontSize:'20px'}, 1500); 
 
    $(".animation").animate({opacity: 0.5, fontSize:'30px'}, 500); 
 
    $(".animation").animate({opacity: 0.9, fontSize:'40px'}, 100); 
 
});

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

Answer 4

什么你有没有很有效的JavaScript。

“字体大小”中的“ - ”和没有引号的“px”值可能是导致问题的原因。

$(document).ready(function() { 
    $(".animation").animate({opacity: 0.1, fontSize:'20px'}, 1500); 
    $(".animation").animate({opacity: 0.5, fontSize:'30px'}, 500); 
    $(".animation").animate({opacity: 0.9, fontSize:'40px'}, 100);  
});