Question

Do you know how I can implement a javascript delay with animated gif when button is clicked? I have the button click functionality, but I want to add a 2 second delay, with gif. Here is my working javascript, without delay. Thank you.

$(function() {
    $('#myButton').click(function () {
        $('#myFrame').attr('src', '/Video/Upload.aspx/');
        $('#myFrame').attr('width', '500');
        $('#myFrame').attr('height', '200');
        $('#vid').hide();
        $('#vid2').show();
        $('#myFrame').show();
    });
});

I tried this, and it didn’t work:

$(function openVideo() {
    $('#myButton').click(function () {
        $('#myFrame').attr('src', '/Video/Upload.aspx/');
        $('#myFrame').attr('width', '500');
        $('#myFrame').attr('height', '200');
        $('#vid').hide();
        $('#vid2').show();
        $('#myFrame').show();
    });
});
setTimeout(openVideo, 2000);

Answer 1

Use the javascript setTimeout function:

function functionName() {
    // do stuff.
}

setTimeout(functionName, 2000);

Or like this:

setTimeout(function() {
    // do stuff.
}, 2000);

So in your example it might look like this:

$(function openVideo() {
    $('#myButton').click(function () {
        var delay = setTimeout(function() {
            $('#myFrame').attr('src', '/Video/Upload.aspx/');
            $('#myFrame').attr('width', '500');
            $('#myFrame').attr('height', '200');
            $('#vid').hide();
            $('#vid2').show();
            $('#myFrame').show();
        }, 2000);
    });
});

Demo