Web Design & Development

Posts Tagged ‘fadeOut’

jQuery Slide Show Fading Content by Clicks

Thursday, March 19th, 2009

Previously I wrote a script which would allow a user to click a piece of text, and it would fadeout the content and fade in a new piece of content. This script expands on the previous one. It was inspired by a comment a user had left me.

The commenter wanted a script where by he had multiple ’slides’ of content, and when a user clicked on one of the slides, it would fade out the current slide and fade in a new slide. I wrote a brief script to try and help him. However i felt that other people may want a similar script.

So now i have created a more SEO friendly script, which is alot more dynamic and allows for easy manipulating of content. As well as the features above, it will allow the user with  javascript turned off to see all the content.

I’ve created an example file located here, where you can download and view the code. The example given, shows slides from a presentation i gave last year. (more…)

jQuery: Fade Out, Change Content, Fade Back In

Tuesday, July 15th, 2008

I’ve been searching for a jQuery function which when a user clicks on a piece of text, the text fades out, then the original text is replaced with a new piece of text, after that the new text is faded in, and couldn’t find one. So decided to make my own.

I have now updated the function, making it use ques rather than relying on the setTimeOut call. If you have any suggestions or questions about the function, dont hesitate to ask me.

I’ve hacked together a first draft. The only thing i am unhappy with at the moment, is that the function relies on a setTimeOut call. The reason this this line is included, is to remove the clicking functionality, it does this by changing the elements ID.

I have included a copy of function below, and an example of it in use.

(more…)