jQuery单击并设置动画

我想为我单击的按钮设置动画。它有class.testclass。我有不止一个按钮的名称，这就是为什么我需要指定一个正确的。为什么这在这里不起作用

问题是我需要在函数中调用它，因为我需要一个动画循环

咖啡脚本：

$('.testclass').click ->
        colorFader = ->
            $(this).animate
                backgroundColor: '#33e27d', 1000, 'linear', ->
                    $(this).animate
                        backgroundColor: '#27ae60', 1000, 'linear', colorFader
        colorFader()

好的，在javascript中应该是这样的：

$('.testclass').click(function() {
  var colorFader;
  colorFader = function() {
    return $(this).animate({
      backgroundColor: '#33e27d'
    }, 1000, 'linear', function() {
      return $(this).animate({
        backgroundColor: '#27ae60'
      }, 1000, 'linear', colorFader);
    });
  };
  return colorFader();
});

---

为什么在动画中有动画？ 这通常是我制作动画的方式：

jQuery(".one_of_my_buttons").on("click",function()
{
      jQuery(this).animate({left: "100px"}, 500, function() {
        // Animation complete.  
      });
});

---

是的，您可以调用click事件中的函数，如下所示

$(document).ready(function(){
    $(".classname").click(function() {
    $(this).animate({letterSpacing:"+=10px"}, 1000);
    anyfunctionname();
    });
});

嗯。我有答案

下面是如何将其添加到函数中的正确代码

$('.testclass').click ->
        colorthis = $(this)
        colorFader = ->
            colorthis.animate
                backgroundColor: '#33e27d', 1000, 'linear', ->
                    colorthis.animate
                        backgroundColor: '#27ae60', 1000, 'linear', colorFader
        colorFader()

---

可以将按钮值传递给函数，然后可以单独设置选定按钮的动画

<input type="button" onclick="colorfadar(this.value)" class="one" Value="Save">
<input type="button" onclick="colorfadar(this.value)" class="one" Value="Delete">

 <script type="text/javascript">
        var cols1 = "#ffcc00,#eeeeee,#3b5998".split(",");
        var cols = "500,200,300".split(",");
        var cPos = 0;

    function colorfadar(str)  { 
        $('input[value="'+str+'"]').animate({backgroundColor:cols1[cPos],width:cols[cPos]},1000);
        cPos++
        if (cPos == cols.length) {
            cPos = 0
        }
        window.setTimeout(function() { colorfadar(str) }, 500)
    }

</script>

---

希望这有帮助

OP使用的是“咖啡脚本”HM ok。这不是问题所在。但我需要调用一个函数，正如您在我的示例中看到的。有什么想法吗？请通过解释此代码的作用以及它如何回答问题来改进此答案。它位于低质量帖子评论队列中，很有可能以当前形式被删除。请看我的示例。我现在添加了一个javascript版本。我需要在函数中调用它。如你所见。你误会我了，你想给你点击的同一个按钮设置动画，对吗？是的。我想在函数中设置动画。这个函数重复colorfade。您可以在我的javascript示例中看到它。当我在课堂上按下按钮时，它就开始工作了。但是，该类的所有按钮都是动画的。但我只希望这个按钮是动画，我已经点击了。希望现在天气转晴-

<input type="button" onclick="colorfadar(this.value)" class="one" Value="Save">
<input type="button" onclick="colorfadar(this.value)" class="one" Value="Delete">

 <script type="text/javascript">
        var cols1 = "#ffcc00,#eeeeee,#3b5998".split(",");
        var cols = "500,200,300".split(",");
        var cPos = 0;

    function colorfadar(str)  { 
        $('input[value="'+str+'"]').animate({backgroundColor:cols1[cPos],width:cols[cPos]},1000);
        cPos++
        if (cPos == cols.length) {
            cPos = 0
        }
        window.setTimeout(function() { colorfadar(str) }, 500)
    }

</script>