javascript - バインドとバインド解除のトグル

Question

クリックすると上部に閉じるボタンが表示される円があり、その閉じるボタンをクリックすると、円が非表示になり、円が表示されます。

その操作を何度でもできるはずです。

<div class="circle"><div class="close"></div></div>​

CSS:

.circle
    {
        background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Blue_circle_logo.svg/100px-Blue_circle_logo.svg.png");
        height: 100px;
        width:100px;        
    }
.circle .close
    {   display:none;
        position:relative;
        background: url("http://www.dlf-data.org.uk/images/icons/close-icon.png");
        height: 30px;
        width:30px;   
        float: right;

    } 

</p>

JS:

$(".circle").click(function() {


$(".close").fadeIn();
$(".circle").unbind("click");
});

$(".close").click(function() {


$(".close").fadeOut();
$(".circle").bind("click");

});​

これがフィドルです!! これは私が望むことをしますが、2回目のクリックを許可しません!! http://jsfiddle.net/RaExx/1/