Problème Javascript [JQuery]

Résolu
Aka13 Messages postés 153 Date d'inscription   Statut Membre Dernière intervention   -  
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'aimerais faire en sorte qu'une div clignotte lorque l'on passe la souris dessus et lorsque l'on par qu'elle arrête de clignoter.

Voici ce que j'ai trouver pour le moment: 
function testFade() {
	$(this).fadeToggle(200);
	setTimeout("testFade()" ,200);
}

<div id="test1" onmouseover="javascript:testFade();">Div 1</div>
<div id="test2" onmouseover="javascript:testFade();">Div 2</div>
<div id="test3" onmouseover="javascript:testFade();">Div 3</div>


Dans ce code que j'ai fait je sais pas si "this" prend en compte la div car rien ne se passe. par contre si je met "#test1" a la place de this cela fonctionne. Par contre la div ne s'arrête plus de clignoter.

J'éspère que vous pourrez m'aider

3 réponses

Réponse 1 / 3
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
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.

++ 

<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">
        &nbsp;
      </div>
    </div>
    <div id="css3">
      <h3>Version CSS3</h3>
      <div class="cssBlink blink">
        &nbsp;
      </div>
    </div>
    <div class="clear"></div>
  </div>
</body>
</html>
0
Réponse 2 / 3
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
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>
0
Réponse 3 / 3
Aka13 Messages postés 153 Date d'inscription   Statut Membre Dernière intervention   8
 
Merci beaucoup de ton aide, tu a été rapide et très précis.
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
De rien, content d'avoir pu t'aider
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse