jQuery单击并为其设置动画

Posted 2023-05-08

【中文标题】jQuery单击并为其设置动画

【英文标题】：jQuery click and animate this

【发布时间】：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();
);

【参考方案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>

希望对你有帮助