Faire apparaître l'élément caché pendant X secondes

Question

J'essaie simplement de montrer un élément caché pendant X secondes après avoir cliqué sur un bouton. Je peux le faire apparaître, mais ne pas le laisser disparaître à nouveau après que X secondes se soient écoulées. Je l'ai essayé avec delay(X) mais rien ne se passe.

$("#mybutton").on(
  "click",
  function() {
    $("#test").css("visibility", "visible");
    $("#test").delay(1000).css("visibility", "hidden");
  }
);

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
  Button
</div>

JSFIDDLE : https://jsfiddle.net/75sttmxj/

javascript jquery html css

3

Black 8 mars 2016 à 15:48

Answer 1

Essayez d'utiliser setTimeout() dans ce contexte,

setTimeout(() => { $("#test").css("visibility", "hidden"); }, 1000 * 1000);

Puisque .delay() ne peut retarder que la file d'attente d'animation.

DEMO

Et si vous ne souhaitez pas utiliser un arrow function pour le faire, vous pouvez simplement utiliser un anonymous function normal comme ci-dessous,

setTimeout(function(){ $("#test").css("visibility", "hidden"); }, 1000);

6

Rajaprabhu Aravindasamy 8 mars 2016 à 13:04

Answer 2

.retard()

La méthode .delay () nous permet de retarder l'exécution des fonctions qui la suivent dans la file d'attente. Il peut être utilisé avec la file d'attente d'effets standard ou avec une file d'attente personnalisée. Seuls les événements suivants dans une file d'attente sont retardés; par exemple, cela ne retardera pas les formes sans arguments de .show () ou .hide () qui n'utilisent pas la file d'attente d'effets.

Afin que vous puissiez utiliser, par exemple fondu : -

$("#mybutton").on("click", function() {
  $("#test").fadeIn().delay(1000).fadeOut();
});

#test {
  display: none;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="https://jsfiddle.net/img/logo.png">

<div id="mybutton">
  button
</div>

Ou créez une file d'attente personnalisée: -

$("#mybutton").on("click", function() {
  $("#test").queue(function() {
      $(this).css("visibility", "visible").dequeue();
    })
    .delay(1000)
    .queue(function() {
      $(this).css("visibility", "hidden").dequeue();
    });
});

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="test" src="https://jsfiddle.net/img/logo.png">

<div id="mybutton">
  button
</div>

1

BenG 8 mars 2016 à 13:04

Answer 3

Essayez d'animer l'opacité:

$("#mybutton").on(
  "click",
  function() {
    $("#test").animate({
      "opacity": 1
    }).delay(1000).animate({
      opacity: 0
    });
  }
);

#test {
  opacity: 0;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
  Button
</div>

1

madalinivascu 8 mars 2016 à 13:06

Answer 4

Même réponse que ci-dessus mais prise en charge par tous les navigateurs

$("#mybutton").on
(
  "click",
  function()
  {
  	$("#test").css("visibility","visible");
        setTimeout(function () 
        {
            $("#test").css("visibility", "hidden");
        }, 1 * 1000);
  }
);

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}

#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
    button
</div>

1

Black 8 mars 2016 à 13:09

Answer 5

$(document).ready(function () {
    $("#mybutton").on( "click",  function() {
        console.log('---------');
        $("#test").css("visibility", "visible");
        setTimeout(function () {
   $("#test").css("visibility", "hidden");
        }, 1000);
       
      });
      });

 #test {
      visibility:hidden;
    }
    #mybutton:hover {
      cursor: pointer;
    }
    #mybutton {
      border: 1px solid black;
      background-color: gray;
      float: top;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <img id="test" src="http://www.jqueryscript.net/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg" />

    <div id="mybutton">
      Button
    </div>

Essayez ce code:

Pour plus de référence

0

Swarna Sekhar Dhar 8 mars 2016 à 13:24

Faire apparaître l'élément caché pendant X secondes

5 réponses

DEMO

Questions connexes

De nouvelles questions