Rappel de jQuery pour un fadeIn et un fadeOut

J'ai regardé quelques-uns des autres articles de cette communauté à propos du problème ci-dessous et je n'ai pas encore trouvé ce que je cherchais ... même si j'ai trouvé le HTML ci-dessous et jQuery était similaire mais pas tout à fait ce que je cherchais. C'est pour les devoirs d'ailleurs, j'aimerais être à l'avant avec ça. Cependant, je tire mes cheveux. Cela étant dit, je cherche de l'aide pour faire une fonction de rappel à l'ensemble d'instructions ci-dessous qui va disparaître l'image originale et ensuite afficher la nouvelle légende et l'image automatiquement. La vieille légende et l'image devraient disparaître et la nouvelle légende et l'image devraient disparaître. Je suis un noob à tout cela et je voudrais apprendre tout ce que je peux. Je sais qu'il me manque quelque chose. Chaque fois que je place le morceau commenté, cela fait disparaître la légende. Ci-dessous le script:Rappel de jQuery pour un fadeIn et un fadeOut

$(document).ready(function() { 
    $("#image_list a").click(function(pre) { 
    pre.preventDefault(); 
    $("#image").fadeOut(1000); 
    change($(this)).delay(1000); 
    $("#caption").fadeOut(1000); 
    change($(this)).delay(1000); 
    }); //end click 
}); //end ready 

//image and caption fade 
var change = function(img) { 
    var caption = img.attr("title"); 
    var imageURL = img.attr("href"); 
    $("#caption").text(caption); 
    //$(#caption).fadeIn(); 
    $("#image").attr("src", imageURL); 
    $("#image").fadeIn(); 
}; //end image and caption fade

Voici le code HTML:

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Image Swap</title> 
    <link rel="stylesheet" href="main.css" /> 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="image_swap.js"></script> 
</head> 
<body> 
    <main> 
     <h1>Ram Tap Combined Test</h1> 
     <ul id="image_list"> 
      <li><a href="images/h1.jpg" title="James Allison: 1-1"> 
       <img src="thumbnails/t1.jpg" alt=""></a></li> 
      <li><a href="images/h2.jpg" title="James Allison: 1-2"> 
       <img src="thumbnails/t2.jpg" alt=""></a></li> 
      <li><a href="images/h3.jpg" title="James Allison: 1-3"> 
       <img src="thumbnails/t3.jpg" alt=""></a></li> 
      <li><a href="images/h4.jpg" title="James Allison: 1-4"> 
       <img src="thumbnails/t4.jpg" alt=""></a></li> 
      <li><a href="images/h5.jpg" title="James Allison: 1-5"> 
       <img src="thumbnails/t5.jpg" alt=""></a></li> 
      <li><a href="images/h6.jpg" title="James Allison: 1-6"> 
       <img src="thumbnails/t6.jpg" alt=""></a></li> 
     </ul> 
     <h2 id="caption">James Allison: 1-1</h2>    
     <p><img src="images/h1.jpg" alt="" id="image"></p> 
    </main> 
</body> 
</html>

Source

2016-02-17 Hawksquest

Vous appelez '.delay (1000),' 'sur le changement ($ (this)) ', mais' change' ne retourne rien. – Stryner

Utilisez le rappel fourni:

$("#image").fadeOut(1000, function() { 
    console.log("Done fading, do something else"); 
});

Source

2016-02-17 20:33:23 tymeJV

Rappel de jQuery pour un fadeIn et un fadeOut

Répondre

Questions connexes