Estoy haciendo este pequeño programa: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(document).ready(function () { var imagen1 = $("<img>", {id: "img1", src: "imatge1.jpg", height: "300", width : "600"}); $(imagen1).css("display","none"); var imagen2 = $("<img>", {id: "img2", src: "imatge2.jpg", height: "300", width : "600"}); $("#resultat").append(imagen1); $("#resultat").append(imagen2); $("#boto1").click (function () { $("#img2").fadeOut(); }, function () { $("#img1").fadeIn(); }); $("#boto2").click (function () { // TODO: }); $("#resultat img").dblclick (function () { // TODO: }); }); <!-- language: lang-html --> <html> <head> <title>Exercici 3</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <h2>Exercici 3</h2> <div id="resultat"></div><br> <input type="button" id="boto1" value="canvia imatge" > <input type="button" id="boto2" value="play" > </body> </html> <!-- end snippet --> Tengo que hacer que cada vez que le de al botón con id ```boto1``` llamado ```canvia la imatge```, primero me haga un fadeOut de la imagen que está visible y que tiene de id ```img2``` y cuando este fadeOut se complete, que se haga un fadeIn de la otra imagen que por defecto está con un ```display: none;``` y que tiene de id ```img1```. ¿Alguien me puede echar un cable? PD: Dejo por aquí las dos fotos por si queréis probarlo. De antemano, muchísimas gracias. [![introducir la descripción de la imagen aquí][1]][1] [![introducir la descripción de la imagen aquí][2]][2] [1]: https://i.sstatic.net/YxuTb.jpg [2]: https://i.sstatic.net/kOqov.jpg