Анимация не производится JQurey

148

24 марта 2019, 14:50

Решил сделать самую простою анимацию появления текста методом $("span").show("slow");

Но когда обновляю сайт,анимация не происходит почему не пойму,вот код

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

Answer 1

Какая анимация появления может быть у элемента, который и так виден?

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