انجمن تخصّصی کانستراکت

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

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

این کد جاوا اسکریپت که بین تگ 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)