Schriftart erhöhen Animation funktioniert nicht JavaScript

Ich versuche, eine einfache jQuery-Animation mit JavaScript neu zu erstellen. Und es funktioniert nicht. Ich würde mich sehr freuen, wenn Sie mir sagen, was falsch ist, denn für mich scheint es richtig. Vielen Dank im Voraus!Schriftart erhöhen Animation funktioniert nicht 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>

Und unten ist die JavaScript-Animation:

<!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>

Quelle

2017-01-17 Lyubomir Parvanov

Es gibt zahlreiche Probleme mit der Transkription zu plain JS.

Zunächst haben Sie im Inline-Stil keine anfängliche Schriftgröße festgelegt und es handelt sich somit um eine leere Zeichenfolge, wenn Sie versuchen, darauf zuzugreifen. So sollte die HTML so aussehen:

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

Anschließend müssen Sie die ursprüngliche Schriftgröße aus der font-size zunehmenden Funktion und Sie müssen auch sie analysieren, um sicherzustellen, dass Sie die Nummer erhalten (und nicht die " 12px "string, sonst wird es NaN, wenn Sie versuchen, zu inkrementieren).

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

Quelle

2017-01-17 14:48:28 giotiskl

Statt langsam Attribut des Gebens, passen sie in Millisekunden, wenn möglich.

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

Quelle

2017-01-17 14:34:45

Ihre Implementierung funktioniert nicht, weil die Schriftgrößen Sie für die div bekommen ist „“ Was müssen Sie ist

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

Für die jQuery-Version Hameed Syed Nähte richtig.

Quelle

2017-01-17 14:48:37 trebor

Schriftart erhöhen Animation funktioniert nicht JavaScript

Antwort

Verwandte Themen