jQuery click and animate this

Question

i want to animate a button i have clicked on. it has the class .testclass. i have more than one button with that name, thats why i need to specify the right one. why is "this" not working here?

the problem is i need to call "this" in a function because i want a animate loop.

coffeescript:

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

ok, in javascript it should look like this:

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

ok. i have the answer.

here is the correct code how to add this into the function.

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

Answer 2

Why do you have animate in animate? This is usually how I animate:

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

Answer 3

Yes You can call a function inside the click event as below

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

Answer 4

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

Answer 5

You can pass button value to the function and then you can animate selected button alone..

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

Hope This helps