Premium Templates
Image Galleries
Image Effects
Video Players
Audio Player
Other Effects
Copyright © Flying Cow Labs All Rights Reserved.
Website crafted using the Serif Software Suite
If you’ve found these tutorials useful please help the world's poorest communities
by making a small donation to WaterAid -
Jquery Fade In/Out Tutorial
This is probably one of the simplest addons that you can incorporate into a website, but probably one of the most effective.
The effect can be assigned to virtually anything in a website, an image, text, a link or even a div (but be careful of transparent PNG’s in Internet Explorer).
The original tutorial and files come from hvdesigns
1. Download the zipped file -
2. Click on Tools in the WebPlus workspace > Site Manager > File Manager > Click ‘New Folder’ This will place a new folder in the Root of the site, name it ‘fader’ then add the 2 JavaScript files from the ‘fader’ file in the download ‘jquery.js’ and ‘custom.js’ to the ‘fader’ file in the WebPlus file manager.
It should replicate the file tree in the image below.
4. All that is required now is to define the class to whatever it is we want to fade in and out when the curser hovers over it.
For fading images you will need to:
Right click the image > Attach HTML > This will bring up the HTML code for the image, it will look something like this:
3. Include the following script in the head of the master page or the page you wish to use the Fade In script.
Copy to clipboard > Insert > Web Object > HTML > Paste to Head.
Where it states:
__addcode="here"
You need to paste over it with
class="fader_img"
For it to work with hyperlinks you will need to:
Set your hyperlink as usual but set it as an ‘Internet page’ even if it’s a page
on your site. It will want it to look like the example below:
http://serifaddons.com" class="fader_img"
For fading blocks of text you will need to:
Right click the ‘text frame’ > Attach HTML > This will bring up the HTML code for
the section of text, it will look something like this:
Where it states:
__AddCode="InsideBorderDiv"
You need to paste over it with
class="fader_img"
I hope you’ve enjoyed this tutorial and have hopefully learned something new. It’s
worth taking a look at the authors tutorial to gain a better understanding of how
the script works and to also pick up ways of modifying the code yourself for use
in your own projects.
If you have any problems setting up the fader in your own website you can post your
query in the Serif Addons Forum
