Search code examples
jqueryjquery-animateslidesimultaneoussametime

jQuery animate and slideDown simultaneously

How can I make animate and slide down functions below to happen at exactly same time and duration:

current_item.css('margin-left', 0);
current_item.animate({ 'marginLeft': '20px'});
current_item.slideDown(300, 'swing');

My code above is animating it before sliding down. If I move animate function below, it is sliding down and then animating

Solution

  • You could combine both marginLeft and height to be .animate()d, like:

    $("#btn1").one("click", function () {
    var current_item = $("#div1");
    current_item.css('margin-left', 0);
    current_item.animate({
        marginLeft: "20px",
        height: "toggle"
    }, 300, "swing");
});

    DEMO: http://jsfiddle.net/sDrtE/

    (yes, I meant to use .one() and not .on(), because it looks weird if you keep clicking the button)