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/
5 réponses
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);
.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>
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>
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>
$(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
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.