Tab effects

[djmtype]

It seems awkward clicking on a tab has no effect like fading, but the accordion has a toggle effect. Is this intentional? And would adding a fade effect to the tab view conflict with the accordion?

Using CSS (with Modernizer for animation detection), this is how I did it. Perhaps, there is a better way?

#demoTab .resp-tab-content > * {
opacity: 0;
}
@-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
}
@keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
}
#demoTab .resp-tab-content.resp-tab-content-active > * {
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
opacity: 1;
}
.no-cssanimations #demoTab .resp-tab-content > * {
opacity: 1;
}

[evanmoore]

I thought the same thing and I second this idea at least using .fadeIn() and .fadeOut()

http://api.jquery.com/fadeIn/ http://api.jquery.com/fadeOut/

[adalbertusgabriel]

Hi. I have saw this subject yesterday, and today I have two solutions. I'm just beginning in jQuery so please explain me, what can be done in better way.

Solution 1 is jQery + CSS (STEP BY STEP):

//ADD UNIQUE ID's TO THE LI ELEMENTS <div id="demoTab">
<ul class="resp-tabs-list"> <li id="clicktofadeA"> .... </li> <li id="clicktofadeB"> .... </li> <li id="clicktofadeC"> .... </li> </ul>

//ADD UNIQUE ID's AND ONE SHARED CLASS TO THE MAIN DIV SECTIONS INSIDE MASTER CONTAINER .resp-tabs-container <div class="resp-tabs-container">
<div id="first" class="tabs_div"> ....... </div> <div id="second" class="tabs_div"> ....... </div> <div id="third" class="tabs_div"> ....... </div> </div> </div> CSS: //VISIBLE CLASS .tabs_div_visible { animation: opacity 2s forwards; -moz-animation: opacity 2s forwards; -webkit-animation: opacity 2s forwards;} //ID'S WITH OPACITY

first {opacity: 0;}

second {opacity: 0;}

third {opacity: 0;}

//FADE ANIMATION @-webkit-keyframes 'opacity' { to {opacity: 1; }} @-moz-keyframes 'opacity' {to {opacity: 1; }} @keyframes opacity { to {opacity: 1; }} //SCRIPT: //LI POSITIONS CONNECTED TO CONTAINERS with class "tabs_div" and ID's "first second third" //CLICK ON FIRST LI ELEMENT $( "#clicktofadeA").click(function() { $( "#first" ).addClass("tabs_div_visible"), $( "#second" ).removeClass("tabs_div_visible"), $( "#third" ).removeClass("tabs_div_visible"); }); //CLICK ON SECOND LI ELEMENT $( "#clicktofadeB" ).click(function() { $( "#second" ).addClass("tabs_div_visible"), $( "#first" ).removeClass("tabs_div_visible"), $( "#third" ).removeClass("tabs_div_visible"); }); //CLICK ON THIRD LI ELEMENT $( "#clicktofadeC" ).click(function() { $( "#third" ).addClass("tabs_div_visible"), $( "#second" ).removeClass("tabs_div_visible"), $( "#first" ).removeClass("tabs_div_visible"); }); //NOW WE DON'T WANT TO HIDE CONTENT AFTER PAGE RELOAD SO WE ADD $( window ).load(function() { $( ".tabs_div" ).toggleClass("tabs_div_visible"); }); SOLUTION 2 IS JUST jQuery. NO CSS: //ADD UNIQUE ID's TO THE LI ELEMENTS AS IN SOLUTION 1 ABOVE //ADD UNIQUE ID's TO THE MAIN DIV SECTIONS INSIDE MASTER CONTAINER .resp-tabs-container AS IN SOLUTION 1 ABOVE //SCRIPT: //CLICK ON FIRST LI ELEMENT $( "#clicktofadeA" ).click(function() { $( "#second, #third" ).fadeOut(); $( "#first" ).fadeIn( 1000); }); //CLICK ON SECOND LI ELEMENT $( "#clicktofadeB" ).click(function() { $( "#first, #third" ).fadeOut(); $( "#second" ).fadeIn( 1000); }); //CLICK ON THIRD LI ELEMENT $( "#clicktofadeC" ).click(function() { $( "#second, #first" ).fadeOut(); $( "#third" ).fadeIn( 1000 ); });

I can't guarantee that these are the best solutions, and that they will work fine everywhere.

[dougshults]

@djmtype great solution and just what I was looking for. I'm glad you were able to incorporate modernizr for ux..cheers