Jquery: syntax for inserting a function

Question

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

Answer 1

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

Answer 2

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