[Résolu] [jQuery]activité prenez en main jquery - transition text align par me_moi - page 1

Bonjour,

Je suis en train de faire l'activité du tutoriel d'introduction à jquery, j'affiche les trois textes un à un en cliquant sur le précédent. J'ai utilisé des text-align pour aligner les textes alternativement à gauche et à droite. Après avoir fait apparaître le premier paragraphe, j'aimerais que le texte soit centré (grâce à text-align: center) mais avec un effet de transition, depuis la gauche jusqu'au centre. J'ai essayé avec les méthodes css et animate, je ne sais pas comment faire. Quelqu'un peut m'aider? Voici mon code :

HTML:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>Carte d'anniversaire.</title>

        <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

        <link rel="stylesheet" href="css/styles.css" />
    </head>

    <body>
        <div>
            <h1>Joyeux anniversaire <sup>cliques ici</sup></h1>

            <p>Tous mes vœux</p>
            <p>Tu es un formidable ami</p>
            <p>Que tous tes désirs se réalisent</p>
        </div>

        <script src="js/anniversaire.js"></script>
    </body>
</html>

CSS:

*
{
    margin: 0;
    box-sizing: border-box;
}

html
{
    font-size: 100%;
    line-height: 1.5;
}

body
{
    text-align: center;
    background-color: #A77;
}

div
{
    min-width: 320px;
}

h1
{
    font-size: 2rem;
    line-height: 3rem;
    background-color: #785;
    margin-top: 25vh;
    transform: translateY(-25%);
    text-shadow: 1px 1px 2px #FFF;
    border-top: 5px ridge #784;
    border-bottom: 5px ridge #784;
}

h1 > sup
{
    font-size: 0.6rem;
    background-color: #AD8;
    color: #740;
    padding: 2px;
    cursor: pointer;
}

p
{
    border-width: 5px;
    border-style: double dashed;
    margin: 25px 0;
    padding: 10px;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: left;
    display: none;
}

p:nth-of-type(even)
{
    text-align: right;
}

p:first-of-type
{
    color: #9668EF;
    text-shadow: 3px 3px 2px #4003A4;
    border-color: #4003A4 #9668EF;
    background-image: linear-gradient(to right, #4003A4 0%, #B30000 20%, #B30000 80%, #4003A4 100%);
}

p:nth-of-type(2)
{
    color: #27813B;
    text-shadow: 3px 3px 2px #8AF526;
    border-color: #27813B #8AF526;
    background-image: linear-gradient(to right, #27813B 0%, #DA5107 20%, #DA5107 80%, #27813B 100%);
}

p:last-of-type
{
    color: #96F0F0;
    text-shadow: 3px 3px 2px #0994CB;
    border-color: #0994CB #96F0F0;
    background-image: linear-gradient(to right, #0994CB 0%, #D1A719 20%, #D1A719 80%, #0994CB 100%);
}

@media all and (min-width: 992px)
{
    div
    {
        max-width: 1350px;
        margin: 0 auto;
    }

    h1
    {
        border: 5px ridge #784;
    }
}

JavaScript :

"use strict";   // Mode strict du JavaScript


/*************************************************************************************************/
/* ****************************************** DONNEES ****************************************** */
/*************************************************************************************************/



/*************************************************************************************************/
/* ***************************************** FONCTIONS ***************************************** */
/*************************************************************************************************/



/*************************************************************************************************/
/* ************************************** CODE PRINCIPAL *************************************** */
/*************************************************************************************************/
document.addEventListener("DOMContentLoaded", function()
{
	// Pour éviter les conflits avec d'autres frameworks js qui utilisent également le symbole $.
	jQuery(document).ready(function($)
	{
		$("sup").on("click", function() {
            $("p:first").css({
				"display": "block",
				"cursor": "pointer"
			});

			$("p:first").on("click", function() {
				$(this).next().css({
					"display": "block",
					"cursor": "pointer"
				});

				$(this).next().on("click", function() {
					$(this).next().css({
						"display": "block",
						"cursor": "pointer"
					});
				});
			});
        });
	});
});

Merci d'avance pour votre aide.

-
Edité par me_moi 17 novembre 2017 à 15:26:50

me_moi

17 novembre 2017 à 15:26:12

18 novembre 2017 à 20:21:00

Est-ce que quelqu'un peut m'aider ?

Merci

20 novembre 2017 à 9:57:48

J'ai donné l'intégralité de mon code, j'ai cherché sur internet et j'ai essayé de moi-même différentes méthodes pour résoudre mon problème. Peut-être n'ai-je pas suffisamment bien décrit mon problème et/ou le résultat que je souhaite obtenir...

Est-ce que quelqu'un pourrait m'aider ?

Merci.

23 novembre 2017 à 13:22:34

Personne?

...

J'ai beau cherché, je n'arrive pas à trouver, quelque chose doit m'échapper.

Je remercie d'avance celui ou celle qui voudra bien m'aider, me donner une piste où chercher.

-
Edité par me_moi 23 novembre 2017 à 14:17:16

25 novembre 2017 à 19:02:50

Est-ce que quelqu'un a une solution ? S'il vous plaît

[jQuery]activité prenez en main jquery

transition text align

[jQuery]activité prenez en main jquery

Supprimer

Modérer

Signaler le message aux modérateurs