recherche

Maison  >  Article  >  interface Web  >  Comment animer des éléments de paragraphe avec jQuery

Comment animer des éléments de paragraphe avec jQuery

藏色散人
藏色散人original
2021-08-27 11:40:431711parcourir

Dans l'article précédent "Comment ajouter des événements de clic et de double-clic à un élément via jQuery", je vous ai présenté la méthode d'ajout d'événements de clic et de double-clic à un élément avec jQuery. Les amis dans le besoin peuvent en apprendre davantage. it~

Cet article Le contenu principal est de présenter comment utiliser jQuery pour animer des éléments de paragraphe.

Donc, dans cet article, nous utiliserons jQuery pour animer des éléments de paragraphe en cliquant sur un bouton, et utiliserons principalement la méthode animate() pour obtenir des effets d'animation. La méthode animate() est utilisée pour changer l'état d'un élément avec des styles CSS. Cette méthode peut également être utilisée pour modifier les propriétés CSS afin d'animer les éléments sélectionnés.

Passons directement au code : 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#GFG").animate({
                    opacity: 0.5,
                    fontSize: "3em",
                }, 1000);
            });
        });
    </script>
</head>

<body style="text-align: center;">
<h1 style="color: #ff311f;">
    PHP中文网
</h1>

<h3>
    如何用jQuery为段落元素设置动画？
</h3>

<p id="GFG">
    PHP中文网是你最佳的学习平台！
</p>

<button>点击这里！</button>
</body>
</html>

L'effet est le suivant :

GIF 2021-8-27 星期五 上午 11-33-41.gif

Ce que tout le monde doit maîtriser ici, c'est la méthode animate() : animate()方法：

animate() 方法执行 CSS 属性集的自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

→注：请使用 "+=" 或 "-=" 来创建相对动画。

animate()

animate() La méthode exécute l'ensemble d'attributs CSS Animation personnalisée. Cette méthode fait passer un élément d'un état à un autre à l'aide de styles CSS. Les valeurs des propriétés CSS changent progressivement, vous permettant de créer des effets animés. Seules les valeurs numériques peuvent être animées (par exemple "margin:30px"). Les valeurs de chaîne ne peuvent pas être animées (telles que « background-color:red »).

→Remarque : veuillez utiliser "+=" ou "-=" pour créer une animation relative. La syntaxe de

animate() est la suivante : 

(selector).animate({styles},speed,easing,callback)

Parameter styles est requis : spécifie une ou plusieurs propriétés/valeurs CSS qui produisent des effets d'animation.

Remarque : lorsqu'il est utilisé avec la méthode animate(), le nom de la propriété doit être camelCase : vous devez utiliser paddingLeft au lieu de padding-left, marginRight au lieu de margin-right, etc.
  • Le paramètre vitesse est facultatif : précise la vitesse de l'animation.

    Valeurs possibles :

  • ms

  • "lent"

"rapide"

  • Le paramètre easing est facultatif : précise la vitesse de l'élément à différents points de l'animation. La valeur par défaut est "swing".

    Valeurs possibles :

  • "swing" - se déplace lentement au début/à la fin, se déplace rapidement au milieu

"linear" - se déplace à une vitesse constante

Astuce : Plus d'assouplissements disponibles dans le fonction d'extension. Le paramètre de rappel est facultatif : la fonction à exécuter après l'exécution de la fonction d'animation. Enfin, je voudrais recommander "

Tutoriel de base de JavaScript🎜🎜" et "🎜Tutoriel vidéo jquery🎜" ~ Bienvenue à tous pour apprendre ~🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment ajouter des événements de clic et de double-clic à un élément via jQueryArticle suivant：Comment ajouter des événements de clic et de double-clic à un élément via jQuery

Articles Liés

Voir plus