javascript - Toggle CSS3 fade?

Question

Is it possible to use jQuery to toggle the opacity of an element (so that you can fade it in/out by the means of -webkit-transition:opacity .5s linear;) and then change the display to display:block if the element is shown, or display:none if the element is hidden?

For example: You click on an <a> tag, which shows a div by means of setting it's opacity to 1 and setting display:block. Then you click the <a> tag again, and it sets the opacity to 0 and then sets the display to none.

My attempt at this is below:

.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/

Answer 1

This seems to be a duplicate: Transitions on the display: property
This question is very very similar, and should lead you to the same conclusion.

Best wishes,
Korvin