I decided to make the easiest text appearance animation using the $("span").show("slow"); method $("span").show("slow");

But when I update the site, the animation does not happen why I don’t understand, here’s the code

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <meta charset="utf-8"> <title>Test</title> </head> <script> $(document).ready(function(){ $("span").show("slow"); }); </script> <body> <div class="b1"> </div> <div class="text_block_1" > <span>Hello</span> </div> </body> <style> body { overflow-x: hidden; } .b1 { height:1025px; width:1931px; margin-top:-3%; margin-left:-1%; border:0px red solid; background-image:url('https://img1.goodfon.ru/original/2560x1440/d/4c/hi-tech-technology-noutbuk.jpg'); background-size:100%; } @font-face{ font-family:low; src:url('12222.ttf'); } .text_block_1{ width:1800px; height:700px; margin-top:-41%; margin-left:24%; border:0px black solid; } span { font-family:low; font-size: 48px; line-height: 2em; background: #696969; color:white; padding:10px; } </style> </html>
  • one
    @igor Thank you! - kombat 6:49

1 answer 1

What kind of appearance animation can an element have that is already visible?

 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <meta charset="utf-8"> <title>Test</title> </head> <script> $(document).ready(function() { $("span").show("slow"); }); </script> <body> <div class="b1"> </div> <div class="text_block_1"> <span>Hello</span> </div> </body> <style> body { overflow-x: hidden; } .b1 { height: 1025px; width: 1931px; margin-top: -3%; margin-left: -1%; border: 0px red solid; background-image: url('https://img1.goodfon.ru/original/2560x1440/d/4c/hi-tech-technology-noutbuk.jpg'); background-size: 100%; } @font-face { font-family: low; src: url('12222.ttf'); } .text_block_1 { width: 1800px; height: 700px; margin-top: -41%; margin-left: 24%; border: 0px black solid; } span { font-family: low; font-size: 48px; line-height: 2em; background: #696969; color: white; padding: 10px; } .text_block_1 span { display:none; } </style> </html>