Add callback to jQuery plugin

Question

I am using a plugin kkcountdown for a timer on a website.

There is an annoying flicker when the page is loading when the timer is not set, so I hid the timer with css and I want to fade it in when the jQuery has run and the timer is set.

This is what I am trying to do now.

I have been looking at the jQuery queue function but have not had any luck with this either.

    $(".kkcount-down").kkcountdown({

        dayText : 'DAY ',
        daysText : 'DAYS<br>',
        hoursText : ' ',
        minutesText : ' ',
        secondsText : 'HOURS',
        displayZeroDays : false,
        oneDayClass : 'one-day'

    }, function(){

         $('#countdown').fadeTo(500, 1);

    });

Answer 1

You could use the jQuery promise method.

It could look something like this

$(document).ready(function() {

$(".kkcount-down").kkcountdown({

        dayText : 'DAY ',
        daysText : 'DAYS<br>',
        hoursText : ' ',
        minutesText : ' ',
        secondsText : 'HOURS',
        displayZeroDays : false,
        oneDayClass : 'one-day'

    });

$( ".kkcount-down" ).promise().done(function(){
$('#countdown').fadeTo(500, 1);
});

});

/ ** SEEING AS THIS DIDN'T WORK FOR YOU **/
Adding a delay to the fadeTo can give you the effect you want allowing for the kkcountdown to initiate. A 1 second delay in my opinion doesn't result in much to the end user but it will give you your cleaner look. So jQuery would be

$(document).ready(function(){

    // custom mod on line 92 by Roko C. Buljan & C Grimshaw-Jones
    $(".kkcount-down").kkcountdown({

        dayText : 'DAY ',
        daysText : 'DAYS<br>',
        hoursText : ' ',
        minutesText : ' ',
        secondsText : 'HOURS',
        displayZeroDays : false,
        oneDayClass : 'one-day'

    });


    $('#countdown').delay(1000).fadeTo(500, 1);

});    

JSFIDDLE