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.

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.

• javascript
• jquery

• 1 To answer your question: "Yes" – Aaron Blenkush Commented Mar 15, 2013 at 1:01
• Just animating them NOT in a callback should make them run at the same time? – Jeff Shaver Commented Mar 15, 2013 at 1:04
• Are you using an old IE? – vol7ron Commented Mar 15, 2013 at 1:07
• 1 @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 Commented Mar 15, 2013 at 1:11
• @JeffShaver Well, they both occur in a callback of a .click() – IMUXIxD Commented Mar 15, 2013 at 1:12

4 Answers 4

They should run together if you do it like:

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

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

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

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

       });
  });

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