javascript - 点击时的 jQuery 动画做一些不同于第一次的事情

Question

我正在尝试复制 www.winston.com主页动画(带圆圈的)。但到目前为止我只能做到 THIS ( LINK HERE ) .我应该如何继续，当我现在按下这些三 Angular 形时，一些文本会根据信息出现和消失。

非常感谢您的帮助。

我的 jQuery 代码看起来是这样的:

$("#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和 HERE IS THE WEBSITE EXAMPLE

Answer 1

你需要 JQuery .one() 函数:

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

这将允许一个函数只运行一次。

所以你可以做的是最初使用 .one() 函数并向元素添加一个新类或 id，然后有一个新函数将从新类运行刚刚添加。

这将允许您使用 2 个不同的函数，一个用于开始，一个用于之后。