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);  
});