مخفی کرن و نمایش با جاوا اسکریپت

[amireza]

سلام دوستان این پلاگین رو همین الان نوشستم البته بره کانستراکت نیست 
از این میتونید برای مخفی کردن و نمایش المنت های صفحه با افکت استفاده کنید 

میخوستم همینطور که مینویسم فیلمشو هم بگیرم ولی دیدم خیلی طول کشید گفتم بیخیال 

این کد جاوا اسکریپت که بین تگ head در صفحه قرار میگیره

کد:

<script>
function hid_box(id) {
var box=document.querySelector(id);
box.style.cssText+='-webkit-transition: 500ms;-moz-transition: 500ms;-o-transition: 500ms;transition: 500ms;';
x=10;
   var s=window.setInterval(function () {
   x--;
   box.style.opacity='0.'+x+'';
       
  if(x<=0){
      window.clearInterval(s);
      box.style.cssText+='display:none;opacity:0;';
      }
   
   },100);
}
 function show_box(id) {
 var box=document.querySelector(id);
   
box.style.cssText+='-webkit-transition: 500ms;-moz-transition: 500ms;-o-transition: 500ms;transition: 500ms;';
x=0;
   var s=window.setInterval(function () {
   x++;
   box.style.opacity='0.'+x+'';
   box.style.display='block';    
  if(x>9){
      window.clearInterval(s);
      box.style.cssText+='display:block;opacity:1;';
      }
   
   },100);
}  

   function show_hid(id){
   var box=document.querySelector(id);    
   if(box.style.display=='none'){    
   show_box(id);          
   }else{hid_box(id);
   }
   }
</script>

و این هم  یه تگ span هستش که با کلیک برروی اون div  با ایدی box1 مخفی یا نمایش داده میشه 

کد:

<span  onclick="show_hid('#box1')">مخفی</span>

<div id="box1" >
این یک متن  است
<br>
این یک متن  است
</div>

با این تابع   فقط مخفی میشه 

کد:

hid_box(id)

 با این هم فقط نمایش داده میشه 
 

کد:

show_box(id)