Need help for my Portfolio page

I am still to create a proper page, I started out with footer and now I am stuck with jQuery. Issue: I have a back-to-top icon and I targetted it using jQuery to add classes which will spin the icon when clicked. I set a timeout function and said it to remove class after some time but that doesn’t work. Link to my Portfolio Page

Hi avizini,

The problem is the “this” keyword, which in regular js functions (like the one you are using in setTimeout) always reffers to the immediate context of the function. In your case it’s the setTimeout method of the global Window object.

You can verify this using a console log:

setTimeout(function() {
    console.log(this)
$(this).removeClass('fa-cog fa-spin').addClass('fa fa-2x fa-arrow');
      }, 1000  );

More info about “this”: https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/this

To fix the problem you have to use the bind() method:

setTimeout(function() {
$(this).removeClass('fa-cog fa-spin').addClass('fa fa-2x fa-arrow');
      }.bind(this), 1000  );

More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Hope this helps!

EDIT: Also, increase the timeout. Otherwise you won’t notice the rotation.

1 Like

Hey! That worked, I’ll check the links. Thanks!

1 Like