Diferència entre revisions de la pàgina «Solucio animate»
De wikiserver
(Es crea la pàgina amb «<source lang="jquery"> <link rel="stylesheet" href="animate.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script> $(…».) |
|||
| (Hi ha una revisió intermèdia del mateix usuari que no es mostren) | |||
| Línia 16: | Línia 16: | ||
<div id="missatge">mensaje</div> | <div id="missatge">mensaje</div> | ||
| + | </source> | ||
| + | |||
| + | Nova solució: | ||
| + | |||
| + | <source lang="jquery"> | ||
| + | <!DOCTYPE html> | ||
| + | <html lang="en"> | ||
| + | |||
| + | <head> | ||
| + | <meta charset="UTF-8"> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| + | <title>Document</title> | ||
| + | <link | ||
| + | rel="stylesheet" | ||
| + | href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" | ||
| + | /> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> | ||
| + | |||
| + | <script> | ||
| + | $(document).ready(function () { | ||
| + | |||
| + | $(':button').click(function () { | ||
| + | $('#missatge').addClass('animate__animated animate__bounceOutLeft'); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | <button>Animar</button> | ||
| + | <div id="missatge">Missatge</div> | ||
| + | </body> | ||
| + | |||
| + | </html> | ||
</source> | </source> | ||
Revisió de 19:44, 6 març 2024
<link rel="stylesheet" href="animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(':button').click(function() {
$('#missatge').addClass('animated bounceOutLeft');
});
});
</script>
</head>
<body>
<div id="missatge">mensaje</div>Nova solució:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(':button').click(function () {
$('#missatge').addClass('animate__animated animate__bounceOutLeft');
});
});
</script>
</head>
<body>
<button>Animar</button>
<div id="missatge">Missatge</div>
</body>
</html>
