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

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

Solution 2:

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

Solution 3:

you can use Velocity.js

for example

$(document).on("click", ".search_bar > input", function () { $(this).velocity("transition.whirlOut", { stagger: 1000, duration: 1000, complete: function () { //on complete... } }); });

Solution 4:

you can add a callback function in the load method, and then animate it in the callback :

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

functionanimateContent() {
        $("#search_layer").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}