点击jQuery动画会做除第一次以外的其他事情

Question

我正在尝试复制www.winston.com主页动画（带有圆圈的动画）。 但是到目前为止，我只设法做到了这一点 。 当我现在按这些三角形时，如何继续操作，根据信息，一些文本会出现或消失。

感谢您的帮助。

我的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("");
});

}）;

这是我的jsFiddle ，这是网站示例

Answer 1

您需要JQuery .one()函数：

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

这将使功能只能运行一次。

因此，您可以做的是首先使用.one()函数，然后向元素中添加一个新类或id，然后使用一个新函数，该函数将在刚刚添加的新类的基础上运行。

这将允许您使用2种不同的功能，一种用于启动，然后一种在使用。