How do I fade in div content on first mouse movement, like on google.com, using JavaScript? I don't want it to fade out again.
相关问题
- Is there a limit to how many levels you can nest i
- How to toggle on Order in ReactJS
- void before promise syntax
- Keeping track of variable instances
- Can php detect if javascript is on or not?
Using CSS3 animations, for whoever supports it at this point.
In the above example, whenever we change the
opacity
on the body, it will do a fade effect lasting0.3
seconds linearly. Attach it to mousemove for one time only.See google.com revamped here :) Chrome and Safari only.
If you use jquery and want it to fade in like google you could do something like this
You can create a fade in effect for the body just like Google with the following code. Please take into consideration this will have similar functionality to Google. You can apply this technique to any element with the proper event handler.
You will want to add the event handler to the body of the document in whatever fashion you normally do. Be sure to modify the fadeIn function to pull information from the target/srcElement if you decide to use an attachment method that does not accept arguments. Or you can hard code desired values and objects into the function:
Inline:
DOM Level 0:
DOM Level 2:
You will also want to set up a css rule for the body element to make sure that it is not visible when the page loads:
I have checked this code to work correctly on IE8, Chrome, Safari, FireFox, and Opera. Good luck.
I would recommend using a javascript library such as http://jquery.com/.
Using jquery, if you wanted to fade in a div with id "content", you could write the following javascript code...
Code: (See it in action)
Note: the fade function could've been smaller, but in this form you can reuse it easily for any element and duration. Have fun!