Avatar of thyros
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:


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.


Avatar of undefined
Last Comment

8/22/2022 - Mon
Pawel Witkowski

It might be what you look for :


Just read about this library :)


I remember seeing that site from before.  There is a newer version of that:


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.
Pawel Witkowski

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes