CODEWITHSUNDEEP
javascriptjquery
IMUXIxD
IMUXIxD

Reputation: 1227

Run two jQuery functions at the same time

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.

Upvotes: 4

Views: 10435

Answers (4)

vol7ron
vol7ron

Reputation: 42099

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
    });
});

Upvotes: 0

makedon
makedon

Reputation: 331

   $(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();

       });
  });

Upvotes: 0

PSR
PSR

Reputation: 40318

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

Upvotes: 1

Lydon
Lydon

Reputation: 2975

They should run together if you do it like:

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

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

Upvotes: 2

Related Questions