+ 1
Transition animation text align to center with jquery
I want to display three texts one by one by clicking on the previous text. I tried with text-align for align texts alternativly to the left and to the right. After to display to first paragraph, I would like to center the text (through text-align: center) but with a transition effect, from left to center. I tried with jquery's css and animate methods, I don't know how to do. Somebody can help me ? Thank you.
5 Respostas
+ 1
I completed to course of jQuery. Here's my complete 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>
+ 1
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;
}
}
+ 1
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"
});
});
});
});
});
});
0
Did you refer here?:
https://www.sololearn.com/Course/jQuery/?ref=app
Costuma ter perguntas como essa?
Aprenda de maneira mais eficiente, de graça:
Quente hoje
Sticky position
2 Votes
Help please?
3 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
SQL practice
2 Votes
Game development
0 Votes
Ruby programming?
3 Votes