javascript - jQuery 动画点击多次

Question

我目前正在构建一个网络应用程序，我需要在其中随机生成文本内容并在每次单击按钮时切换其颜色。

目前，我正在尝试为其添加某种动画，这是每次单击按钮时我希望获得的内容:

1. 添加了随机类
2. div 从页面底部弹出，不透明度增加

我准备了一个简化的 JSFiddle 来说明我的观点。

示例

http://jsfiddle.net/cdacx0tn/11/

var color = ["blue", "purple", "green"];

$("#try-me").click(function() { 
    var colorClass = color[Math.floor(Math.random()*color.length)];

    $("#content")
    .removeClass()
    .addClass(colorClass)
    .animate({
        "margin-top": "50px",
        "opacity": "1"
    }, 700);
});

我设法在单击一次按钮时完成此操作，但我不知道如何每次单击它。

我想补充一点，我不是专业开发人员，所以请多多包涵。

感谢您的帮助。

Answer 1

在动画之前设置元素的 CSS，使用 marginTop 确保它回到它的初始位置，并且使用 opacity 看不到它。

在它们中添加一个 stop() 以防止动画排队，然后就可以了:

var color = ["blue", "purple", "green"];

$("#try-me").click(function() { 
    var colorClass = color[Math.floor(Math.random()*color.length)];
    $("#content")
        .css({opacity:0,marginTop:200})
        .removeClass()
        .addClass(colorClass)
        .stop(true,false)
        .animate({
            "margin-top": "50px",
            "opacity": "1"
        }, 700);
});

JSFiddle

文档:

• css()
• stop()