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");
    });
};
});

http://jsfiddle.net/charlescarver/zzP6g/

questionAnswers(3)

yourAnswerToTheQuestion