Переключить CSS3 исчезнуть?

Можно ли использовать jQuery для переключения непрозрачности элемента (так что вы можете постепенно увеличивать или уменьшать его с помощью-webkit-transition:opacity .5s linear;), а затем изменитьdisplay вdisplay:block если элемент показан, илиdisplay:none если элемент скрыт?

Например: вы нажимаете на<a></a> тег, который показывает div с помощью установки его 'с непрозрачностью до 1 и настройкойdisplay:block, Затем вы нажимаете<a></a> снова тег, и он устанавливает непрозрачность на 0, а затем устанавливает отображение на.none

Моя попытка это ниже:

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

Ответы на вопрос(3)

Ваш ответ на вопрос