Run two jQuery functions at the same time

Question

I am using jQuery to slide something down and fade something else out, but in testing it, I've noticed that the fading appears too long after the sliding happens. In other words, there is enough of a lag that it is noticeable.

Just to make myself clear, these two items which I am sliding one and fading the other are different elements and I can not use chaining.

Is there any way to get these functions to run at the same time or closer together so that they appear they are running at the same time ?

Here is the jQuery code that I am using:

$(document).ready(function(){
    $('#trigger').click( function(){         
        $(this).animate({ opacity: 0.0 });        // fade
        $('#carousel').animate({ top: '100px' }); // slide
        $('#pullrefresh').css('top', '-490px');   // line 5
        $('#detector').hide();                    // line 6
    });
});

The fade and the slide are happening at different times, line 5 and the slide seem to be occurring at the same time.

Just animating them NOT in a callback should make them run at the same time? — Jeff Shaver, Mar 15 '13 at 01:04
@vol7ron Nope, Chrome. Don't know why any would want to use old IE other than that they can not install another browser for some reason. — IMUXIxD, Mar 15 '13 at 01:11
@JeffShaver Well, they both occur in a callback of a .click() — IMUXIxD, Mar 15 '13 at 01:12
@IMUXIxD I recently was told that there are some companies out there that have required MS to ship Win7 with IE6 for their business. IE6! -- one of the worst of them all and it's still a requirement for use. Don't underestimate software availability. — vol7ron, Jul 27 '13 at 20:10

score 2 · Accepted Answer · answered Mar 15 '13 at 01:13

2

They should run together if you do it like:

$('#element1').animate({
    opacity: 0.25,
    }, 1000, function() {
        // complete
});

$('#element2').animate({
    opacity: 0,
    }, 1000, function() {
        // complete
});

answered Mar 15 '13 at 01:13

Lydon

2,942
4
25
29

PSR · Answer 2 · 2013-03-15T01:28:52.103

1

try this

 $(document).ready(function(){
        $('#trigger').click( function(){         
            $(this).animate({ opacity: 0.0 },1000);        // fade
            $('#carousel').animate({ top: '100px' }); // slide
            $('#pullrefresh').css('top', '-490px');   // line 5
            $('#detector').hide();                    // line 6
        });
    });

specify the time 1000 for animate

edited Mar 15 '13 at 01:28

answered Mar 15 '13 at 01:16

PSR

39,804
41
111
151

I don't understand how this is different than the code that I posted. I can not tell any difference. – IMUXIxD Mar 15 '13 at 01:21

score 0 · Answer 3 · answered Mar 15 '13 at 01:30

   $(document).ready(function(){

       $('#trigger').click( function(){

           $.Deferred(function(dfr) {

              dfr.pipe(function() {
                  return  $(this).animate({ opacity: 0.0 }); // fade
              }).
              pipe(function() {
                  return $('#carousel').animate({ top: '100px' }); // slide
              })
              pipe(function() {
                  return $('#pullrefresh').css('top', '-490px'); // line 5
              }).
              pipe(function() {
                  return $('#detector').hide(); // line 6
              });

          }).resolve();

       });
  });

score 0 · Answer 4 · answered Mar 15 '13 at 01:30

It'd be nicer if you set up a fiddle. If your DOM is large, you can minimally reduce the delay by doing the lookup ahead of time:

$(document).ready(function(){
    $('#trigger').click( function(){
        var vars = { $this        : $(this),
                     $carousel    : $('#carousel'),
                     $pullrefresh : $('#pullrefresh'),
                     $detector    : $('#detector')
                   };

        vars.$this.animate({ opacity: 0.0 },1000);  // fade
        vars.$carousel.animate({ top: '100px' });   // slide
        vars.$pullrefresh.css('top', '-490px');     // line 5
        vars.$detector.hide();                      // line 6
    });
});

Run two jQuery functions at the same time

4 Answers4

Linked