.is("visible") & .is(":visible") working differently

Question

I am using jquery visible selector to check if a child element is visible or not.But surprisingly .is("visible") & .is(":visible") is showing different result on using it with css visibility:hidden property.When I am using .is('visible') it is alerting false & on using .is(":visible") is it alerting true. But on changing the css property to display:none, the result is consistent.Here is the code.

HTML

<div id="parentEle">
    I have hidden span
    <span class="hiddenContent">
        I am hiddenContent
    </span>
</div>
<button type="button" onclick="_checkChild()">Check Child</button>

JS

function _checkChild(){
    var x= false;
    x =$("#parentEle").children(".hiddenContent").is(":visible");
    alert(x);
}

CSS

.hiddenContent{
   visibility:hidden
}

jsfiddle

Can you please help to understand this discrepancy?Thanks

Answer 1

.is(":visible"); is a jQuery special selector that checks if an element is visible which might vary from time to time. .is("visible"); is a standard selector that would check if the element is <visible /> and won't tell you anything about it's visibility.