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

有帮助吗?

解决方案

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)

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top