thyros
asked on
JQuery DIV Tab Content Switcher On Hover With Fade Out / In Transition Effect
Notice that many site front pages contain a main focus point, an area of content that switches through 4-5 different images or html content, like a preview teaser? Here is an example:
http://www.pricegrabber.co.uk/
A Featured Products 'Showcase' with several tabs
* Laptops
* Cameras
* TVs
* Fragrance
* Blu-ray Players
When you mouseover / hover over the tab link, the current content fades out, before fading in the new content. I would like to recreate this functionality, using jquery library or a simple javascript function if possible.
There are other variations of this content slideshow online, but most of these are dependent upon fixed width DIVs and slide in and out of view, thus making them unsuitable for fluid layouts. However, this method with fade transitions rather than slide in is more preferable as it allows fluid layouts and variable width DIVs to fit in nicely without major problems.
I would appreciate if someone could put together the javascript / jquery necessary to achieve that effect, perhaps using about 5 tabs or links (related to 5 DIVs) as in the example above. It would also be a nice touch to show a random tab content on page load rather than showing the first tab content by default.
Thanks.
http://www.pricegrabber.co.uk/
A Featured Products 'Showcase' with several tabs
* Laptops
* Cameras
* TVs
* Fragrance
* Blu-ray Players
When you mouseover / hover over the tab link, the current content fades out, before fading in the new content. I would like to recreate this functionality, using jquery library or a simple javascript function if possible.
There are other variations of this content slideshow online, but most of these are dependent upon fixed width DIVs and slide in and out of view, thus making them unsuitable for fluid layouts. However, this method with fade transitions rather than slide in is more preferable as it allows fluid layouts and variable width DIVs to fit in nicely without major problems.
I would appreciate if someone could put together the javascript / jquery necessary to achieve that effect, perhaps using about 5 tabs or links (related to 5 DIVs) as in the example above. It would also be a nice touch to show a random tab content on page load rather than showing the first tab content by default.
Thanks.
Last Comment
ASKER
Hi,
I remember seeing that site from before. There is a newer version of that:
http://stilbuero.de/jquery/tabs_3/
However, the closest effect I see is in the 'rotating tabs' demo - but I have a couple issues with that one. When it is rotating through the tabs when you mouse over the content it wont pause the rotating effect, it just keeps going, which is bad for usability if someone wants to read the content. It would be preferable if it didn't rotate after page load, but instead opening up on a random tab on page load and then staying there until the user selects a different tab. One other thing we'd like to do is have the transition become active on mouseover/hover rather than onclick.
I will study the code further, so thanks for the link. If there is any further assistance we could get with achieving the above goals, that would be much appreciated.
I remember seeing that site from before. There is a newer version of that:
http://stilbuero.de/jquery/tabs_3/
However, the closest effect I see is in the 'rotating tabs' demo - but I have a couple issues with that one. When it is rotating through the tabs when you mouse over the content it wont pause the rotating effect, it just keeps going, which is bad for usability if someone wants to read the content. It would be preferable if it didn't rotate after page load, but instead opening up on a random tab on page load and then staying there until the user selects a different tab. One other thing we'd like to do is have the transition become active on mouseover/hover rather than onclick.
I will study the code further, so thanks for the link. If there is any further assistance we could get with achieving the above goals, that would be much appreciated.
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks.
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
http://stilbuero.de/jquery/tabs/#fragment-28
Just read about this library :)