CODEWITHSUNDEEP
javascriptanimation
Daniel
Daniel

Reputation: 13

Javascript won't fade text and throws no error when run

window.onload = function() {
  window.setTimeout(fadein, 1000); //2 seconds
}
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
 var x = event.pageX; 
 if (x > 1200) {
    function fadein() {
      document.getElementById('fadein').style.opacity = '0';

    }
 }
});

I just want the text to fade after the mouse x coordinate reaches a certain point. JavaScript throws no error, am I missing any syntax or do I lack a fundamental understanding of how I should go about this process?

Some quick FAQ I might expect:

Yes, I have JQuery loaded

Yes, the HTML/CSS is all consistent in naming.

Upvotes: 1

Views: 49

Answers (2)

nosleepfilipe
nosleepfilipe

Reputation: 76

Try like this. 

function fadein() {
  document.getElementById('fadein').style.opacity = '0';
}
window.onload = function() {
window.setTimeout(fadein, 1000); //2 seconds
}
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " +       event.pageY );
var x = event.pageX; 
if (x > 1200) {
 fadein()
}
});

Upvotes: 1

Ram
Ram

Reputation: 144689

  1. You are defining the fadein in your mousemove handler. The function is only available in that context so fadein in your onload handler is undefined.

  2. function fadein() { ... } is a function declaration. You don't call it, so the function body is never executed!

You should define the function outside the mousemove handler and call it in your if statement by using invocation operator: (), i.e.: fadein(). 

function fadein() {
  document.getElementById('fadein').style.opacity = '0';
}

window.onload = function() {
  window.setTimeout(fadein, 1000); //2 seconds?
}

$( document ).on( "mousemove", function( event ) {
   $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
   var x = event.pageX; 
   if (x > 1200) {
     fadein();
   }
});

As a side note, setting CSS opacity to 0 makes the element invisible. So it actually fades out the element.

Upvotes: 1

Related Questions