jquery plugin css opacity

Question

I am trying to create a simple jquery plugin for a CRT type effect. I did check the documentation -> https://learn.jquery.com/plugins/basic-plugin-creation/ but i think i don't understand.

When i execute the code without turning it into a plugin it works fine.

setInterval(function(){
  $('#wallpaper').css("filter", "opacity("+ String(Math.random() * (0.96 - 1.0) + 0.96 ) +")");
}, (Math.random() * (500 - 1000) + 100) );

When i turn it into a plugin it does nothing.

$.fn.crt = function(){
  setInterval(function(){
    $(this).css("filter", "opacity("+ String(Math.random() * (0.96 - 1.0) + 0.96 ) +")");
  }, (Math.random() * (500 - 1000) + 100) );
}
console.log($('#wallpaper').crt());

When i change $(this).css()... to this.css()... it gives me the following error : TypeError: this.css is not a function

Can anyone tell me how to get this code working in a plugin or what i am doing wrong?

Duplicate? http://stackoverflow.com/questions/1051782/jquery-this-vs-this — jmargolisvt, Oct 06 '15 at 13:59
So it should be $(this). That does not answer the second part of the problem which i don't understand, and which is not explained in the question you are referring to. Thank you for clearing up one part. — Dany, Oct 06 '15 at 14:04

epascarello · Accepted Answer · 2015-10-06T14:07:23.887

this inside the timeout is not what you think it is. It will be the window object. You need to either bind() the anonymous function to this or use the classical closure technique of defining a variable outside.

$.fn.crt = function(){
  var that = $(this);
  setInterval(function(){
    that.css("filter", "opacity("+ String(Math.random() * (0.96 - 1.0) + 0.96 ) +")");
  }, (Math.random() * (500 - 1000) + 100) );
}

jquery plugin css opacity

1 Answers1