Skip to main content
agregando snippet
Origen Enlace
Vick Muñoz
  • 2.9k
  • 1
  • 10
  • 19

¡Hola amigos! EstoyEstoy 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>

  $(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>

¡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>

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>

Origen Enlace
Alex Iglesias
  • 489
  • 1
  • 6
  • 16

Ocultar una imagen, mostrar otra y así sucesivamente + Jquery

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