jQuery toggleClass with Visibility

I'm not sure why jQuery uses the CSS property "display" to toggle hide and show, since "display" when set to "none" (which jQuery.hide() does) removes the space it takes up, and if you have elements adjacent, they're going to move around.

The workaround is to use toggleClass with a class you create which is used exclusively for setting "visibility" to "hidden" (instead of "visible"). When an element is "hidden", it is still there taking up space, keeping other elements properly aligned, it just is invisible.

The typical example of the use case is when you have a blank area that when hovered over displays some tool icons, or a delete X.

However, you might run into a confusing problem if you try this without giving the element to be toggled on and off the invisible class to begin with.
Ex.:

//style
.hidden{
visibility: hidden;
}
//HTML
<span class='hidden del'>X</span>
......
//jQuery
$('.editbay').hover(function(){
$(this).find('span').toggleClass('hidden');
});