0

Estoy haciendo este pequeño programa:

  $(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:
                });
            });
<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>

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í introducir la descripción de la imagen aquí

1 respuesta 1

2

Puedes utilizar el método toggle para ocultar y mostrar las imágenes, cualquier duda hazla saber.

$(document).ready(function () {

                var imagen1 = $("<img>", {id: "img1", src: "imatge1.jpg", title: 'imagen1', height: "300", width : "600"});
                  $(imagen1).css("display","none");
                var imagen2 = $("<img>", {id: "img2", src: "imatge2.jpg", title: 'imagen2', height: "300", width : "600"});

                $("#resultat").append(imagen1);
                $("#resultat").append(imagen2);

                $("#boto1").click (function () {
                 /* $("#img2").fadeOut();
                }, function () {
                  $("#img1").fadeIn();*/
                  
                  $('img').toggle();
                });

                $("#boto2").click (function () {
                  // TODO:
                });

                $("#resultat img").dblclick (function () {
                  // TODO:
                });
            });
<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.