jquery метод animate () не является гладким - PullRequest
Новая
       1

jquery метод animate () не является гладким

0 голосов
/ 26 января 2020 

$(document).ready(function() {
  $(".first").hover(function() {
    $(this).animate({
      'font-size': '20px',
      'margin-top': '12px',
      'font-weight': '600'
    }, 500)
  })
})
.first {
  font-size: 16px;
  margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
</head>

<body>
  <p class="first">Hello</p>
</body>

</html>

Я пытался анимировать текст, используя метод jquery animate (). Но анимация не плавная. Я пытался отложить анимацию, а также использовать атрибут перехода в css, но результат тот же. Что мне нужно сделать, чтобы анимация была плавной?

1 Ответ

0 голосов
/ 26 января 2020

когда вы хотите использовать animate.css, вы должны использовать атрибуты по-своему, например, в CSS margin-top: 20px работает НО в css .animate это не работает, и вы должны написать так marginTop: '20px'. Примечание: в animate. css вы НЕ ДОЛЖНЫ использовать "" или "в имени атрибута и просто использовать это в значениях. поэтому вы должны использовать это: 

$(document).ready(function() {
  $(".first").hover(function() {
    $(this).animate({
      fontSize: '20px',
      marginTop: '12px',
      fontWeight: '600'
    }, 500)
  })
})

это ваш код работает. JSfiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...