0

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!

4 Answers 4

3

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

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

0

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

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

1
  • thanks for your input, but the answer provided by @Justinas is easy to use and using the same callback function Nov 7, 2016 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.