Question

I am using jquery to slide up an down a div.

For some reason setTimeout is not working (looks like a function scope issue).

Not able to figure out what is wrong with the below code.
(both functions are inside $(document).ready(function(){ } )

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000, calbck);
    initiate_timeout();

    function calbck(){}
});

function initiate_timeout(){
    var time_out = setTimeout(function() {
        $('#image_view').slideUp(1000, calbck);
    },2000);
}

Answer 1

You have some JS errors and scoping issues. Why would you ever have debugging turned off when trying to troubleshoot an error? Change your code to this:

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000);
    setTimeout(function() {
        $('#image_view').slideUp(1000);
    },2000);  // will start 2 seconds after slideDown starts (which is 1 second after it completes)
});

or even better, use the completion function of the first animation to set the timer:

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000, setTimeout(function() {
        $('#image_view').slideUp(1000);
    },1000));  // will stay open for 1 second before sliding up again
});

Or, even better, using jQuery’s delay/queuing, you can do this:

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000).delay(1000).slideUp(1000);  // delay 1 sec between effects
});

The calbck you were trying to pass to slideUp was not defined in the scope you were using it (inside of initiate_timout()). It was private to your click handler.

jQuery probably has better ways to chain effects than using your own timer, but I see no reason why this code shouldn’t work if it matches your HTML.

Note: if your background image wasn’t already pre-cached, it may not be loaded right away when your slideDown starts.