jQuery aide sur la méthode slideDown/slideUp ne peut pas faire fonctionner

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>YES</title> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 
 
    </head> 
 
    
 
    <body> 
 
     
 
     
 
     
 
     <img id="dramatic" src="statefair.jpg" width="400px" height="400px"> 
 
     <br> 
 
     <button id="make_visible">HIDE</button> 
 
     
 
     
 
     <style> 
 
      img#dramatic { 
 
      display: none; 
 
      } 
 
     </style> 
 
     
 
     
 
     <script> 
 
     
 
     $("button#make_visible").on("click", function() { 
 
     $("img#dramatic").slideDown(); 
 
     }); 
 
     
 
     </script> 
 
</body> 
 
</html>

Je travaille avec un livre et dans le livre que je suis l'apprentissage de la méthode slideDown/Up jquery. J'ai lancé le code à l'origine sur ma page Web principale et cela ne fonctionnera pas. Donc j'ai juste créé un simple YES.html (vu ci-dessus) pour m'assurer que je le codais correctement. Cependant, il ne glissera pas vers le haut ou le bas de l'image. Je ne sais pas ce qui me manque pour que ça marche. Je suis un débutant donc je pourrais manquer quelque chose de simple. Veuillez expliquer votre réponse/solution par étapes si possible ou peut-être me guider vers un tutoriel de la page Web de quelque sorte. Merci.

Source

2017-10-08 MVR

recherchez-vous quelque chose comme ça?

$('#make_visible').on('click', function (e) { 
 
    /* method 1 */ 
 
    /*if ($('#dramatic').css('display') === 'none') { 
 
    $('#dramatic').slideDown(); 
 
    $(this).html('Hide'); 
 
    } 
 
    else { 
 
    $('#dramatic').slideUp(); 
 
    $(this).html('show'); 
 
    }*/ 
 
    /* method 2 */ 
 
    $('#dramatic').slideToggle(); 
 
    this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="make_visible">HIDE</button> 
 
<br /> 
 
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />

Source

2017-10-08 19:16:34

Whoa merci. Cela ouvre beaucoup d'idées sur l'utilisation de jquery en fonction de ce petit extrait de code. – MVR

Si ma réponse a résolu votre problème, veuillez l'accepter comme réponse. –

Vous n'avez pas importé jQuery, pour utiliser jQuery UI, vous devez d'abord importer jQuery. Pensez cela aide:

 <!DOCTYPE html> 
     <html> 
     <head> 
      <title>YES</title> 
      <script 
        src="https://code.jquery.com/jquery-3.2.1.js" 
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
        crossorigin="anonymous"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 
     </head> 

     <body> 



      <img id="dramatic" src="statefair.jpg" width="400px" height="400px"> 
      <br> 
      <button id="make_visible">HIDE</button> 


      <style> 
       img#dramatic { 
       display: none; 
       } 
      </style> 


      <script> 

      $("button#make_visible").on("click", function() { 
      $("img#dramatic").slideDown(); 
      }); 

      </script> 
    </body> 
</html>

Source

2017-10-08 19:12:32 Griffi0n

Aussi, vous devez travailler sur l'amélioration de placement de vos balises HTML – Griffi0n

Hey merci. Ça a marché. Oui je serais ravi si vous connaissiez des didacticiels où et comment je devrais mettre en place une page html avec des tags correctement placés si vous en connaissez? – MVR

w3schools est le meilleur pour commencer. –

a besoin UI jQquery jQuery pour fonctionner, de sorte que vous devriez inclure cette première. J'ai utilisé jQuery 1.3.2 comme cela semble être le meilleur ajustement pour jQuery UI 1.8.

Le livre pourrait être un peu daté que la dernière version est 1.12.

J'ai aussi changé le "onclick" un peu de code:

$("button#make_visible").click(function() { 
 
    $("img#dramatic").slideDown(); 
 
});

 img#dramatic { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 
<body> 
 
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px"> 
 
    <br> 
 
    <button id="make_visible">HIDE</button> 
 

 
</body>

Source

2017-10-08 19:39:42

jQuery aide sur la méthode slideDown/slideUp ne peut pas faire fonctionner

Répondre

Questions connexes