¡Hola amigos!
Estoy haciendo este pequeño programa:

```
<html>
    <head>
        <title>Exercici 3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(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:
                });
            });
        </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>

```

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