Question

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

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

CoffeeScript的：

$('.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();
});

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Answer 4

确定。我有答案。

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

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

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

希望这会有所帮助

jQuery单击并为此设置动画

5 个答案: