jQuery动画点击多次

jQuery animate on click multiple times

本文关键字：动画 jQuery      更新时间：2023-09-26

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

目前，我正试图添加某种动画到它，这是我想获得的每次点击按钮:

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

当按钮被点击一次时，我设法做到了这一点，但我不知道如何做到这一点每次被点击。

我想补充一点，我不是一个专业的开发人员，所以请宽容。

谢谢你的帮助。

在动画化之前设置元素的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()

try

 var color = ["blue", "purple", "green"];
    $("#try-me").click(function() { 
        var colorClass = color[Math.floor(Math.random()*color.length)];
        $("#content").css({ "margin-top": "200px", "opacity": "0"});  // reset the margin and opacity value
        $("#content")
        .removeClass()
        .addClass(colorClass)
        .animate({
            "margin-top": "50px",
            "opacity": "1"
        }, 700,function(){

        });
    });
演示

动画完成后将#content的margin-top重新初始化为200px:

     $("#content").css("margin-top","200px");

演示

相关文章：