最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Run two jQuery functions at the same time - Stack Overflow

programmeradmin6浏览0评论

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.

Share Improve this question edited Mar 15, 2013 at 1:11 IMUXIxD asked Mar 15, 2013 at 0:59 IMUXIxDIMUXIxD 1,2275 gold badges23 silver badges44 bronze badges 7
  • 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
 |  Show 2 more ments

4 Answers 4

Reset to default 2

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
    });
});
发布评论

评论列表(0)

  1. 暂无评论