Sanjeev K Sanjeev K - 1 month ago 27
CSS Question

JQuery load with animation/transition

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

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();
    }
);