How to Make a jQuery Fade to More Smooth
JQuery is a JavaScript library that simplifies the scripting of certain JavaScript functions. You can refer to functions in jQuery when writing your script to save yourself from manually writing out multiple lines of JavaScript code. Functions in the jQuery library include event handling, document manipulation, Ajax interaction and animation effects such as making a Web page element fade in, fade out or fade to a destination or another function. If you find that your fade effect is too sudden, you can increase the duration of the fade effect to create a smoother fade.
Other People Are Reading
Instructions
-
-
1
Right-click on your Web page source file or JavaScript .js file and select "Open With." Click to select "Notepad" or "WordPad" from the list of applications and click "OK."
-
2
Locate the line of JavaScript code that contains the fade function. The function can read ".fadeIn," ".fadeOut" or ".fadeTo," and can have up to four arguments within parentheses that follow this. The first argument after the fade function determines the duration of the fade effect in milliseconds, while the following arguments define opacity, easing and a callback function for when the fade completes. Not all arguments need to be present for the line of code to execute properly. For example, a line of code that fades in a Web page element with the ID designation of "block" for a duration of 400 milliseconds and then calls a function labeled "function" can display as below.
$('#block').fadeIn(400, function () {
-
-
3
Replace the duration value of "400" with "1000" to increase the face duration to a full second, or 1,000 milliseconds, making the transition more smooth. The line of code with this replacement reads as below.
$('#block').fadeIn(1000, function () {
-
4
Click the "File" menu, and select "Save."
-
1
