the idea of want create is: have div trigger when mouse on over these div data show in specific div (the right side bordered div), , when mouse out default data show, , each time there fadeindown effect. here have done far
<style type="text/css"> .content { margin-left: 200px; border: 1px solid; height : 0; opacity : 0; transition : opacity .3s ease, height .3s ease; -webkit-transition : opacity .3s ease, height .3s ease; -moz-transition : opacity .3s ease, height .3s ease; position: absolute; } .content.fade-in-down { opacity : 1; height : 100px; } .trigger { width: 100px; height: 100px; background-color: #333; margin-bottom: 20px; } </style> <script> function show(id) { document.getelementbyid("default").classlist.remove("fade-in-down"); settimeout(function(){ var el = document.getelementbyid(id); el.classlist.add("fade-in-down"); }, 500); } function hide(id) { var el = document.getelementbyid(id); el.classlist.remove("fade-in-down"); settimeout(function(){ document.getelementbyid("default").classlist.add("fade-in-down"); }, 500); } window.onload = function(e) { var el = document.getelementbyid("default"); el.classlist.add("fade-in-down"); }; </script> <div style="display: block; width: 100%"> <!--these 3 div trigger--> <div style="float: left;"> <div onmouseover="show('div1');" onmouseout="hide('div1')" class="trigger"></div> <div onmouseover="show('div2');" onmouseout="hide('div2')" class="trigger"></div> <div onmouseover="show('div3');" onmouseout="hide('div3')" class="trigger"></div> </div> <!--these data--> <div id="default" class="content" style="position: absolute;">this default</div> <div id="div1" class="content">div 1 content</div> <div id="div2" class="content">div 2 content</div> <div id="div3" class="content">div 3 content</div> </div>now problem is: in bordered div when mouse on over div1, div2 or div3 data showing previous div data showing , looks messy. , used slide down better if can use fadeindown effect instead of slide down fade
i've updated example include clearselection method, called whenever show or hide methods triggered.
the html has been changed include wrapping div id of "data". child nodes can queried when clearselection method called.
the clearselection method loops through of children within "data" div , removes "fade-in-down" class, ensuring single div visible @ 1 time.
.content { margin-left: 200px; border: 1px solid; height: 0; opacity: 0; transition: opacity .3s ease, height .3s ease; -webkit-transition: opacity .3s ease, height .3s ease; -moz-transition: opacity .3s ease, height .3s ease; position: absolute; } .content.fade-in-down { opacity: 1; height: 100px; } .trigger { width: 100px; height: 100px; background-color: #333; margin-bottom: 20px; }<div style="display: block; width: 100%"> <!--these 3 div trigger--> <div style="float: left;"> <div onmouseover="show('div1');" onmouseout="hide('div1')" class="trigger"></div> <div onmouseover="show('div2');" onmouseout="hide('div2')" class="trigger"></div> <div onmouseover="show('div3');" onmouseout="hide('div3')" class="trigger"></div> </div> <div id="data"> <!--these data--> <div id="default" class="content" style="position: absolute;">this default</div> <div id="div1" class="content">div 1 content</div> <div id="div2" class="content">div 2 content</div> <div id="div3" class="content">div 3 content</div> </div> </div> <script> function show(id) { document.getelementbyid("default").classlist.remove("fade-in-down"); settimeout(function() { //clear prior selections. clearselection(); var el = document.getelementbyid(id); el.classlist.add("fade-in-down"); var defaultel = document.getelementbyid("default"); //if default element has class of "fade-in-down", remove it. if (defaultel.classname.indexof("fade-in-down") !== -1) { defaultel.classlist.remove("fade-in-down"); } }, 500); } function hide(id) { var el = document.getelementbyid(id); el.classlist.remove("fade-in-down"); settimeout(function() { //clear prior selections clearselection(); //find default element. var defaultel = document.getelementbyid("default"); //if default element doesn't have class of "fade-in-down", add it. if (defaultel.classname.indexof("fade-in-down") === -1) { defaultel.classlist.add("fade-in-down"); } }, 500); } function clearselection() { var parent = document.getelementbyid('data'); if (parent != null && parent.children.length > 0) { //loop through of child nodes , remove "fade-in-down" class. (var = 0; < parent.children.length; i++) { document.getelementbyid(parent.children[i].id).classlist.remove("fade-in-down"); } } } window.onload = function(e) { var el = document.getelementbyid("default"); el.classlist.add("fade-in-down"); }; </script>
Comments
Post a Comment