:visible and :hidden mixup

:visible and :hidden mixup

I get a result I don't expect here. Can anyone shed light on this. I figured if the next element has display none on it then it won't slide up and then down again. But when I put a console.log message in there to get the css display property it says "none" but still animates the element. What is going on here? Maybe I a misunderstanding the :visible and :hidden selectors but they seem pretty straight forward.

Thanks,
Jeff

        $(function() {
            var clicker = $('#test-list').find('dt');
            $(clicker).bind('click', function() {
                if ( $(this).next('dd:visible') ) {
                    return;
                }
                else {
                    $('dd:visible').slideUp('slow');
                    $(this).next('dd').slideDown('slow')
                }
            });
        });

    <dl id="test-list">
        <dt>test animation</dt>
        <dd style="di">
            <ul>
                <li>Test definition</li>
                <li>Test definition</li>
                <li>Test definition</li>
                <li>Test definition</li>
            </ul>
        </dd>
        
        <dt>test animation</dt>
        <dd>
            <ul>
                <li>Test definition</li>
                <li>Test definition</li>
                <li>Test definition</li>
                <li>Test definition</li>
            </ul>
        </dd>
        
        <dt>test animation</dt>
        <dd>
            <ul>
                <li>Test definition</li>
                <li>Test definition</li>
                <li>Test definition</li>
                <li>Test definition</li>
            </ul>
        </dd>
    </dl>