jQuery单击并为其设置动画答案

【问题标题】：jQuery click and animate thisjQuery单击并为其设置动画
【发布时间】：2014-05-22 19:18:05
【问题描述】：

我想为我点击的按钮制作动画。它有类.testclass。我有不止一个具有该名称的按钮，这就是为什么我需要指定正确的按钮。为什么“这个”在这里不起作用？

问题是我需要在函数中调用“this”，因为我想要一个动画循环。

咖啡脚本：

$('.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 click jquery-animate this

【解决方案1】：

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

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

【讨论】：

OP 使用的叫coffeescript

【解决方案2】：

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

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

【讨论】：

请看我的例子。我现在添加了一个 javascript 版本。我需要在函数中调用“this”。如你看到的。你误会我了
您想为您单击的同一个按钮设置动画，对吗？
是的。我想在一个函数中对其进行动画处理。此函数重复颜色渐变。您可以在我的 javascript 示例中看到它。当我用类调用按钮时，它正在工作。但是，该类的所有按钮都是动画的。但我只希望这个按钮是动画的，我已经点击了。希望现在清楚。 :-)

【解决方案3】：

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

【讨论】：

嗯好的。那不是问题。但我需要调用一个函数，正如您在我的示例中看到的那样。有什么想法吗？
请通过解释此代码的作用以及它如何回答问题来改进此答案。它在低质量帖子审核队列中，很有可能以当前形式被删除。

【解决方案4】：

好的。我有答案。

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

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

【讨论】：

【解决方案5】：

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

<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>

希望对你有帮助

【讨论】：