フォント増加アニメーションが機能しません。JavaScript

JavaScriptを使用して簡単なjQueryアニメーションを再作成しようとしています。そして、それは動作しません。あなたが何が間違っているか教えてもらえればとてもうれしいでしょう。前もって感謝します！フォント増加アニメーションが機能しません。JavaScript

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("div").animate({fontSize: "100px"}, "slow"); 
}); 
</script> 
</head> 
<body> 

<div style="background:#98bf21;height:200px;width:600px;">Hello World</div> 

</body> 
</html>

、以下のJavaScriptアニメーションです：

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<title>This is a title!!!</title> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <div style="background-color: #98bf21; width: 200px; height: 600px;">Hello World!</div> 
    <button onclick="startFontIncrease()">Click me</button> 
    <script> 
    function startFontIncrease() { 
     var element = document.getElementsByTagName("div")[0]; 
     var fontSize = element.style.fontSize; 
     var id = setInterval(increaseFont, 5); 
     function increaseFont() { 
      if (fontSize == 100) { 
       clearInterval(id); 
      } 
      else { 
       fontSize++; 
       element.style.fontSize = fontSize; 
      } 
     } 
    } 
    </script> 
</body> 
</html>

出典

2017-01-17 Lyubomir Parvanov

プレーンJSへの転写には多くの問題があります。

最初は、インラインスタイルで最初のフォントサイズを設定していないため、アクセスしようとすると空の文字列になります。だから、HTMLは次のようにする必要があります：

<div style="background-color: #98bf21; width: 200px; height: 300px; font-size: 12px;"> 
    Hello World! 
</div>

その後、あなたはフォントサイズ増加関数のうち、最初のフォントサイズを取得する必要がありますし、あなたも必ず番号を取得（およびない「作ってそれを解析する必要があります12px "の文字列でなければ、インクリメントしようとするとNaNになります）。

var element = document.getElementsByTagName("div")[0]; 
var fontSize = parseInt(element.style.fontSize); 

function startFontIncrease() { 

    var id = setInterval(increaseFont, 5); 
    function increaseFont() { 
     if (fontSize == 100) { 
      clearInterval(id); 
     } 
     else { 
      fontSize++; 
      element.style.fontSize = fontSize + 'px'; 
     } 
    } 
}

出典

2017-01-17 14:48:28 giotiskl

代わりの遅い属性を与え、可能な場合はミリ秒単位でそれらを調整します。

<script> 
$(document).ready(function(){ 
    $("div").animate({fontSize: "100px"}, 2000); 
}); 
</script>

出典

2017-01-17 14:34:45

のfontSizeあなたはdivのために得るためにあなたの実装では動作しませんが、あなたがしなければならないものをはハミードサイードの継ぎ目が正しいとjQueryのバージョンについては

document.getElementById("btn").addEventListener("click",startFontIncrease); 
    function startFontIncrease() { 
    var element = document.getElementsByTagName("div")[0]; 
    var fontSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size')); 

    var id = setInterval(increaseFont, 100); 

    function increaseFont() { 
     if (fontSize == 100) { 
     clearInterval(id); 
     } else { 
     fontSize++; 
     element.style.fontSize = fontSize + "px"; 
     } 
    } 
    }

である「」です。

出典

2017-01-17 14:48:37 trebor

フォント増加アニメーションが機能しません。JavaScript

答えて

関連する問題