Open djmtype opened 10 years ago
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/
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
//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.
@djmtype great solution and just what I was looking for. I'm glad you were able to incorporate modernizr for ux..cheers
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?