Question

I’m doing a callback for my toggle, It seems it executes before the toggle is done. Is there something I could do to prevent that? or do I just “reverse” my if

jsfiddle: DEMO

$('#toggle_now').change(function () {
    $('#show_me').toggle(!this.checked, callBack());
}).change();

function callBack() {
    var $this = $('#show_me');
    if (!$this.is(':visible')) {
        $('#span_me').html('visible');
    } else {
        $('#span_me').html('hidden');        
    }
}

EDIT:
I kinda need the option off ShowAndHide, can I achieve a callback function without creating a new function that keeps listening to the toggle?

Answer 1

Firstly, when using the “showOrhide” option in toggle, it has no callback !!!

You need a duration for that, as that is the only time the toggle function would be asynchronous:

$('#toggle_now').on('change', function () {
    $('#show_me').toggle(this.checked);
    $('#span_me').html($('#show_me').is(':visible') ?  'visible' : 'hidden');
}).change();​

There’s no need for a callback, as the html() function will not execute until after the toggle() function is completed anyway.

FIDDLE