Jquery: syntax for inserting a function

I'm trying to integrate an animation by using the bezier path plug-in and I can't seem to implement it right.

Stripped down, here's what I have:

    $('#next2btn').live('click', function(){
       $(this).attr('id','next3btn');
        $('#content2').show(300, function() {
            $('#account').fadeTo(500,1.0)
            var arc_params = {
                center: [278,120],
                radius: 186,
                start: -90,
                end: 90,
                dir: -1
                };
            });
        $("#account").animate({path : new $.path.arc(arc_params)},1000);
});

So, I'm trying to add this piece of code into what I have:

    var arc_params = {
                center: [278,120],
                radius: 186,
                start:开发者_如何转开发 -90,
                end: 90,
                dir: -1
              };
        });
$("#account").animate({path : new $.path.arc(arc_params)},1000)

which works on its own as does the other.

I'm thinking it's something about declaring that variable and where I do that.

I'm essentially chaining a few different animations/actions upon a button click.

Thanks for any insight- kj

You're right in your assumptions. As you are declaring arc_params inside the callback function of show, it is only visible inside the function, and not outside of it, it in the following code. Declare it outside the function, so it will be visible to your animate function.

Here's a simple example of how it works, independent of any other code:

var a = "outside function";
function someFunction() {
    var b = "inside function";
}

alert(a); //alerts correctly
alert(b); //gives error: 'b is not defined' (as it is not visible from outside the function

That snippet you posted won't work by itself; it's syntactically incorrect (mismatching )).

You'll most probably be wanting:

$('#next2btn').live('click', function(){
    $(this).attr('id','next3btn');

    $('#content2').show(300, function() {
        $('#account').fadeTo(500,1.0);

        var arc_params = {
                center: [278,120],
                radius: 186,
                start: -90,
                end: 90,
                dir: -1
            };

        $("#account").animate({
            path : new $.path.arc(arc_params)
        }, 1000);
    });
});

(which of course, is equivilent to:)

$('#next2btn').live('click', function(){
    $(this).attr('id','next3btn');

    $('#content2').show(300, function() {
        $('#account').fadeTo(500,1.0);

        $("#account").animate({
            path : new $.path.arc({
                center: [278,120],
                radius: 186,
                start: -90,
                end: 90,
                dir: -1
            })
        }, 1000);
    }); 
});