[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

How do I queue two jQuery functions?

Hi,

I have a working two working lines of code and I would like line one to execute first and as soon as that is over I would like line two to execute:

line 1:
 
$("#sitedivs div:eq("+k+")").animate({"left": $("#sitedivs div:eq("+k+")").position().left+$(window).width()+"px"}, {queue:false, duration: 1500,specialEasing: {left: "easeInOutExpo"}

Open in new window


line 2:
 
$("#sitedivs div:eq("+i+")").css("left", i*$(window).width()+"px" );

Open in new window


How do I queue these two functions?

thanks in advance




p.s. I was hoping to achieve something like another of my working codes which looks like this (this is just an example of what I am trying to achieve)
 
jQuery("#animazioneIntroContainer").fadeTo(1000, 1.0, 
    function() { jQuery("#animazioneIntroA").fadeOut(2000, 
        function() { jQuery("#animazioneIntroB").fadeOut(2000
        ); 
    });
});

Open in new window

0
badwolfff
Asked:
badwolfff
  • 3
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
you can supply a callback function. Basically it would look something like this, but without more context, I don't know if this will work (need to define k and i)

 
$("#sitedivs div:eq("+k+")").animate({ 
                                      "left": $("#sitedivs div:eq("+k+")").position().left+$(window).width()+"px"
                                      }, {
                                            duration: 1500, 
                                            specialEasing: {
                                                left: "easeInOutExpo"
                                                },
                                            queue: false
                                            }, 
                                            complete: function() {
                                                $("#sitedivs div:eq("+i+")").css("left", i*$(window).width()+"px" );
                                            }
                                        });

Open in new window


more here: jquery animate
0
 
badwolfffAuthor Commented:
Hi there seems to be some error in the code somewhere but I can't locate it.
When I paste it in dreamweaver it says error on line 10, i.e.

complete: function() {


any ideas?
0
 
Kyle HamiltonData ScientistCommented:
try it without the "complete" label:

so instead of:

complete: function() { .....

just:

function() { .....

However, I've had issues using the callback this way. Try these out to see if they'll work:

1.:

 
$("#sitedivs div:eq("+k+")").animate({ 
                                      "left": $("#sitedivs div:eq("+k+")").position().left+$(window).width()+"px"
                                       }, 1500, "easeInOutExpo", function() {
                                                $("#sitedivs div:eq("+i+")").css("left", i*$(window).width()+"px" );
                                            }
                                        });

Open in new window


OR 2:

 
$("#sitedivs div:eq("+k+")").animate({ 
                                      "left": $("#sitedivs div:eq("+k+")").position().left+$(window).width()+"px"
                                      }, {
                                            duration: 1500, 
                                            specialEasing: {
                                                left: "easeInOutExpo"
                                                }
                                            }, 
                                            complete: function() {
                                                $("#sitedivs div:eq("+i+")").css("left", i*$(window).width()+"px" );
                                            }
                                        });

Open in new window


I found I wasn't able to use "queue" with a call back - not sure why.

Hope this helps.
You can always check out http://api.jquery.com/animate/ for documentation.
0
 
badwolfffAuthor Commented:
I will test them tonight and send you a reply
thanks so much
0
 
badwolfffAuthor Commented:
The first solution works like a charm!
thanks so much!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now