jQuery animation on click do something else than first time

Question

I am trying to replicate the www.winston.com homepage animation (that with the circles). But so far I only managed to do THIS ( LINK HERE ) . How should I continue so when i`ll press now on those triangles, some text to appear and disappear according to the information.

I`d appreciate your help.

My jQuery code looks this way:

$("#green-circle").click(function () {
$("#green-circle").animate({
    width: "120",
    height: "120",
    marginTop: "20",
    marginLeft: "0"
}, 2000, "linear", function () {
    $(this).after("");
}),
$("#blue-circle").animate({
    width: "120",
    height: "120",
    marginTop: "20",
    marginLeft: "5"
}, 2000, "linear", function () {
    $(this).after("");
}),
$("#green-circle2").animate({
    width: "120",
    height: "120",
    marginTop: "20",
    marginLeft: "5"
}, 2000, "linear", function () {
    $(this).after("");
});

});

HERE IS MY jsFiddle and HERE IS THE WEBSITE EXAMPLE

Answer 1

You need JQuery .one() function :

http://api.jquery.com/one/

This will allow a function to only be run once.

So what you can do is use the .one() function initially and add a new class or id to the elements, and then have a new function that will run off of the new class that was just added.

This will allow you to use 2 different functions, one for the start and then one afterwards.