javascript - JQuery load with animation/transition

Question

I am loading div on click with jQuery load method, its working fine but I wanted to add animation like slideUp/slideDown effect, but not sure how to achieve this:

following is the code

$('.search_bar > input').click(function(){
        $("#search_layer").load("file-url.html");
        $("body").css({"overflow": "hidden", "height": "auto"});
});

Can anyone please suggest how to add slideUp/Down transition, I tried CSS transition as well but no luck

thanks in advance!

Answer 1

Use .load(url, callback) to do stuff after element is loaded. First set it's display: none via css, than do

$('#search_layer').load(
    'file-url.html',
    function () {
        $('#search_layer .div-to-show').slideDown();
    }
);