1

I want to slideUp() a div, and when its sliding up, I want to move it down by animate() - in the exact same time .

what I have done so far :

    ln = jQuery("Selector");
    ln.slideUp(1500, function() {
        ln.animate({top: '150px'}, 'slow');
        var Html = jQuery('#last' + id1).html() + jQuery('#last' + id2).html();
        ln.html(Html);
    });

But it slides up first, and then moves down 150px.

I want to call these two functions (slideUp and animate ) in the exact same time, I want to know is it possible or not?

Or does my problem have an easier way to solve ?

P.S : I think this kind of questions has been asked before, like this, but Its not my answer if you read it completely.

Community
  • 1
  • 1
Alireza Fallah
  • 4,609
  • 3
  • 31
  • 57
  • Well, technically it's not possible to run two functions at the same time because JavaScript is single threaded. In your code, you are *explicitly* calling `.animate` *after* `.slideUp` is done. That's what the callback is for. However, you can still run both animations at the same time, e.g. if you just change `.animate` to perform the same animation as `.slideUp`. – Felix Kling Feb 01 '14 at 07:50
  • @FelixKling - he means that he wants the two animations to appear to run at the same time. This is possible. – jfriend00 Feb 01 '14 at 07:51
  • @jfriend00: That's why I said *technically* ;) (and I was more referring to the title actually) – Felix Kling Feb 01 '14 at 07:52
  • @AlienArrays - what ? how ? – Alireza Fallah Feb 01 '14 at 07:54

1 Answers1

5

You can do this by using .animate() for both operations and just specifying both changes with properties that you pass to animate. The slideup can be done by specifying a final height of 0 for animate. Using this single animation, jQuery will run both changes together as part of the same animation sequence.

ln.animate({top: '150px', height: 0}, 'slow');

Working demo: http://jsfiddle.net/jfriend00/kKsa4/

jfriend00
  • 683,504
  • 96
  • 985
  • 979