Przełącz zanik CSS3?
Czy możliwe jest użycie jQuery do przełączania przezroczystości elementu (aby można było go włączyć / wyłączyć za pomocą-webkit-transition:opacity .5s linear;
), a następnie zmieńdisplay
dodisplay:block
jeśli element jest pokazany, lubdisplay:none
jeśli element jest ukryty?
Na przykład: kliknij<a>
tag, który pokazuje div przez ustawienie jego nieprzezroczystości na 1 i ustawieniedisplay:block
. Następnie kliknij<a>
ponownie, i ustawia krycie na 0, a następnie ustawia wyświetlacz nanone
.
Moja próba tego jest poniżej:
.visible{
opacity: 1;
-webkit-transition:opacity .5s linear;
display: block;
}
.close{
display: none;
opacity:0;
width:20px;
height:20px;
background-color:red;
-webkit-transition:opacity .5s linear;
}
$(".toggle").click(function(){
if ($(".close").css("display") === "none") {
$(".close").addClass("visible").delay(500).promise().done(function () {
$(this).css("display", "block");
});
};
if ($(".close").css("display") === "block") {
$(".close").removeClass("visible").delay(500).promise().done(function () {
$(this).css("display", "none");
});
};
});