1

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

Jamol
  • 3,768
  • 8
  • 45
  • 68

1 Answers1

2

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)

Ian
  • 50,146
  • 13
  • 101
  • 111
  • thank you very much. That works fine. And I need to slide up and set margin-left to 0 as well. What is equivalent of slideUp in animate function? – Jamol Jul 18 '13 at 22:51
  • @jCloud Come on now, I already gave you the basic structure - just reverse the value for `marginLeft`: http://jsfiddle.net/sDrtE/2/ – Ian Jul 19 '13 at 01:38
  • Yeah I did not know that toggle works for hiding too. But I used height: "hide" instead of toggle to slideUp the block – Jamol Jul 20 '13 at 19:52
  • @jCloud Ahh I see. Well here's a more full "toggle" way of doing it (if you care): http://jsfiddle.net/cfTXd/ – Ian Jul 22 '13 at 16:23