Customising Fade-In Animations

These optional animations on elements like the body background, navigation bar or content container are generated using the jQuery .fadeIn() property. The code which controls the animation effects is conveniently located in the index.html file within the theme contents, so it is possible to customise the fade-in speed without digging too deeply into the theme code. Open the theme contents and then open the index.html file in your preferred code editor. In the head section of the page at the top, you will see some code like this:

By default the animation speed is set to 2000 milliseconds (2 seconds). This effect duration is specified individually for the body background (#myExtraContent1), the navigation bar (#navBar, #nav-bg) or the main content container (#main). Exact animation effect vary from theme to theme. The effect duration can either be increased or decreased here. It is advisable not to edit other code here, unless you are familiar with jQuery Javascript and have the facilities to test your modifications. Changing the effect duration is the safest and easiest edit to make.