Блог

Главная - Вопросы по программированию - Я начал с Jquery, и все пошло не так хорошо

Я начал с Jquery, и все пошло не так хорошо

#javascript #jquery #jquery-animate

#javascript #jquery ( jquery ) #jquery-анимировать

Вопрос:

итак … сегодня я начал немного изучать jquery и пытаюсь создать небольшую текстовую анимацию со словами «импровизировать», «адаптировать» и «преодолеть» (идея взята из мема), но когда я использую

 improvise.animate({left: "50px"})

поскольку improvise является текстовым элементом, просто ничего не происходит.

Вот мой код (очень плохой код, но я новичок), я надеюсь, вы сможете мне помочь.

HTML:

     <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>page</title>
        <link rel="stylesheet" href="style.css">
  </head>
  <body>
        <div id="container">
        <h1 id="improvise">Improvise</h1>
        <h1 id="adapt">Adapt</h1>
        <h1 id="overcome">Overcome</h1>
        </div>
<script       src="https://code.jquery.com/jquery-3.5.1.min.js"
              integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
              crossorigin="anonymous"></script>
        <script src="script.js"></script>
  </body>
</html>

JS:

 let improvise = $("#improvise")
let adapt = $("#adapt")
let overcome = $("#overcome")

improvise.hide()
adapt.hide()
overcome.hide()

function start(){
setTimeout(function(){improvise.fadeIn()}, 0)
setTimeout(function(){adapt.fadeIn()}, 1000)
setTimeout(function(){overcome.fadeIn()}, 2000)
setTimeout(function(){improvise.animate({left: "50px"}, 500)}, 3000)
}

Ответ №1:

Вы нигде не вызываете свою start() функцию, вот почему на самом деле ничего не происходит.

И внутри вашего css вам нужно присвоить своему #improvise элементу position: relative свойство.

Комментарии:

1. Tnx, он предназначен для того, чтобы не вызывать start, но я ничего не знал о теге css