Question

Following is my javascript in which I’ve been trying to show certain div and after the function being performed the div should get hide by itself but i am having this issue that in same function both doesnot work like to show first then after some time interval hide that div but when i put event of show and hiding separately it worked fine. Kindly let me know how can i modify the following code so that after processing the result it should hide that div

 function jq(input)
    {


    if (input == 'abc')
    {
    $("#show").show(1000);

        document.getElementById('sele').options.length = 0;

    $('#sele').append('<option value="test">Testing</option>').updateSelect();

    $("#show").hide(1000);

    }
}

 <div id="show" > <img  src="ajax-loader.gif" width="16" height="16" /> </div>

Answer 1

$("#show").show(1000, function() {

    $('#sele').empty(); // instead of: document.getElementById('sele').options.length = 0;

    $('#sele').append('<option value="test">Testing</option>').updateSelect();

    // make a delay using setTimeout()
    setTimeout(function() {

      $("#show").hide(1000);

    }, 500);

});

Full Code

function jq(input) {
    if (input == 'abc') {
        $("#show").show(1000, function() {
            $('#sele').empty();
            $('#sele').append('<option value="test">Testing</option>').updateSelect();
            setTimeout(function() {
                $("#show").hide(1000);
            }, 500);
        });
    }
}