Problème Javascript [JQuery]
Résolu/Fermé
Aka13
Messages postés
153
Date d'inscription
jeudi 18 juin 2009
Statut
Membre
Dernière intervention
8 février 2016
-
1 juil. 2012 à 18:16
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 1 juil. 2012 à 19:01
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 1 juil. 2012 à 19:01
A voir également:
- Problème Javascript [JQuery]
- Telecharger javascript - Télécharger - Langages
- Javascript round ✓ - Forum Javascript
- Table de multiplication javascript ✓ - Forum Javascript
- Onclick javascript - Astuces et Solutions
- Javascript est activé mais ne fonctionne pas ✓ - Forum Internet / Réseaux sociaux
3 réponses
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Modifié par prosthetiks le 1/07/2012 à 18:42
Modifié par prosthetiks le 1/07/2012 à 18:42
Salut,
Je t'ai fait un exemple avec une animation à l'aide de JQuery et une à l'aide de css3.
Je te laisse choisir laquelle tu préfères.
++
Je t'ai fait un exemple avec une animation à l'aide de JQuery et une à l'aide de css3.
Je te laisse choisir laquelle tu préfères.
++
<html>
<head>
<title></title>
<style type="text/css">
body{
text-align: center;
margin:0;
padding:0;
}
#global{
width: 800px;
margin: 0 auto;
margin-top: 40px;
}
#js, #css3{
width: 380px;
background-color: #ccc;
border: #aaa solid 1px;
text-align: center;
}
#js{
float: left;
}
#css3{
float: right;
}
.blink{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #888;
border:#666 solid 1px;
color: white;
margin-bottom: 20px;
}
.clear{
width: 100%;
clear: both;
}
/* Animation css3 */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.cssBlink:hover {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var over = false;
animate = false;
$('.jsBlink').mouseover(function(){
over = true;
if(!animate){
blink();
}
});
$('.jsBlink').mouseout(function(){
over = false;
});
function blink(){
animate = true;
$('.jsBlink').animate({
opacity: 0,
}, 'slow', function(){
$('.jsBlink').animate({
opacity: 1
}, 'slow', function(){
if(over){
blink();
return;
}
animate = false;
});
});
}
});
</script>
</head>
<body>
<div id="global">
<div id="js">
<h3>Version Javascript (JQuery)</h3>
<div class="jsBlink blink">
</div>
</div>
<div id="css3">
<h3>Version CSS3</h3>
<div class="cssBlink blink">
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Modifié par prosthetiks le 1/07/2012 à 18:54
Modifié par prosthetiks le 1/07/2012 à 18:54
j'ai supprimé la version css, voici une version JS fonctionnant avec pleins de divs.
<html>
<head>
<title></title>
<style type="text/css">
body{
text-align: center;
margin:0;
padding:0;
}
#global{
width: 668px;
margin: 0 auto;
margin-top: 20px;
}
#js{
width: 100%;
background-color: #ccc;
border: #aaa solid 1px;
text-align: center;
}
#js{
float: left;
}
#css3{
float: right;
}
.blink{
float: left;
width: 200px;
height: 200px;
margin: 10px;
background-color: #888;
border:#666 solid 1px;
color: white;
}
.clear{
width: 100%;
clear: both;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var over = false;
animate = false;
$('.jsBlink').mouseover(function(){
this.over = true;
if(!this.animate){
blink(this);
}
});
$('.jsBlink').mouseout(function(){
this.over = false;
});
function blink(element){
element.animate = true;
$(element).animate({
opacity: 0,
}, 'slow', function(){
$(element).animate({
opacity: 1
}, 'slow', function(){
if(this.over){
blink(element);
return;
}
element.animate = false;
});
});
}
});
</script>
</head>
<body>
<div id="global">
<div id="js">
<h3>Version Javascript (JQuery)</h3>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
<div class="jsBlink blink">
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Aka13
Messages postés
153
Date d'inscription
jeudi 18 juin 2009
Statut
Membre
Dernière intervention
8 février 2016
8
1 juil. 2012 à 18:58
1 juil. 2012 à 18:58
Merci beaucoup de ton aide, tu a été rapide et très précis.
prosthetiks
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
1 juil. 2012 à 19:01
1 juil. 2012 à 19:01
De rien, content d'avoir pu t'aider