Можно ли сократить этот код?

130

28 декабря 2020, 17:20

Могу ли я как то сократить этот код не теряя его функциональности?

 // Перевод в проценты 
  function per(num, par) { 
    return Number(num / 100 * par); 
  } 
 
  var block_size = 200; 
  var block_sped = 600; 
 //Анимацыя вперед 
  function ani_show(sped, name) { 
      $(name).animate({ height: (per(block_size, 40)) + 'px'}, per(sped, 90),"linear", (function(){  
        $(name).animate({ height: (block_size) + 'px'},sped, "linear",(function(){   })); 
      })); 
  } 
 //Анимацыя назад 
function ani_none(sped, name, name2) { 
  $(name).animate({ height: (block_size) + 'px'},0, "linear",(function(){  
    $(name).animate({ height: (per(block_size, 80)) + 'px'},per(sped, 10),"linear", (function(){ 
      $(name).animate({ height: (0) + 'px'},per(sped, 50), "linear",(function(){  
        ani_show(sped, name2); 
      })); 
    })); 
  })); 
} 
 
 
 
$( ".but1" ).click(function() { 
  var check1_1 =  parseInt($(".block2").css("height")); 
  var check2_1 =  parseInt($(".block3").css("height")); 
  if(check1_1 == block_size){ 
    ani_none(block_sped, ".block2", ".block1"); 
  } 
  if(check2_1 == block_size){ 
    ani_none(block_sped, ".block3", ".block1"); 
  }  
}); 
 
$( ".but2" ).click(function() { 
  var check1_2 =  parseInt($(".block1").css("height")); 
  var check2_2 =  parseInt($(".block3").css("height")); 
  if(check1_2 == block_size){ 
    ani_none(block_sped, ".block1", ".block2"); 
  } 
  if(check2_2 == block_size){ 
    ani_none(block_sped, ".block3", ".block2"); 
  }  
}); 
 
$( ".but3" ).click(function() { 
  var check1_3 = parseInt( $(".block1").css("height")); 
  var check2_3 = parseInt( $(".block2").css("height")); 
  if(check1_3 == block_size){ 
    ani_none(block_sped, ".block1", ".block3"); 
  } 
  if(check2_3 == block_size){ 
    ani_none(block_sped, ".block2", ".block3"); 
  }  
});

div{ 
  background-color:#00fff0; 
  overflow:hidden; 
  font-size:30px; 
  height: 0px;  
} 
 
.block1{ 
  height: 200px;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<a class="but1">but1</a> 
<a class="but2">but2</a> 
<a class="but3">but3</a> 
<div class="block1">text1</div> 
<div class="block2">text2</div> 
<div class="block3">text3</div>

Answer 1

Сократил (переписав):

JsFiddle

var timeout; /* Сюда будет сохраняться таймаут... */ 
$('.but').on('click', function(){ 
  clearTimeout(timeout);/*...чтобы перед каждым кликом удалить его */ 
  $('.but').removeClass('active'); 
  $(this).addClass('active'); 
 
  $('.block').removeClass('show'); 
  /* Находим номер кликнутой кнопки */ 
  var index = $(this).index('.but'); 
  timeout = setTimeout( function(){ 
    /* По этому же номеру открываем нужную вкладку*/ 
    $('.block').eq( index ).addClass('show'); 
  }, 1000);    
  /* Только не сразу, а через секунду - когда предыдущая успеет закрыться */ 
  /* Удаление таймаута вначале клика было необходимо, иначе если быстро кликать на несколько  
  кнопок - сразу откроются все (от оставшегося таймаута с предыдущего клика) */  
});

.block { 
  /* transition будет работать только для height */ 
  transition: height 1s linear;  
  height: 0px; 
  background-color:#00fff0; 
  overflow:hidden; 
  font-size:30px; 
} 
 
.show { 
  height: 200px; 
} 
 
.but { 
  display: inline-block;  
  border: 2px solid #236; cursor: pointer; 
  padding: 3px 8px; margin: 0 4px 7px 0; 
} 
.active {background-color: #236; color: white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<a class="but active">but1</a> 
<a class="but">but2</a> 
<a class="but">but3</a> 
 
<div class="block show">text1</div> 
<div class="block">text2</div> 
<div class="block">text3</div>

Если в подобных задачках персонально тыкаете кодом для каждой кнопки, значит что-то идет не так) Потом захочется переделать вариант для 4-х кнопок и задолбаетесь переписывать.

Вот вчера не зря давал ссылу) JavaScript переключаемые вкладки - табы (и немного CSS) - - во втором пункте похожий пример.

Answer 2

Ну я смог на чистом css это сделать

div{ 
  background-color:#00fff0; 
  overflow:hidden; 
  font-size:30px; 
  height: 0px;  
  animation-duration: 3s; 
  animation-timing-function: linear;   
  animation-iteration-count: 1;  
  animation-name:revers ; 
} 
 
.but1:checked ~ .block1{ 
    
   height: 200px;  
   
  animation-duration: 3s; 
  animation-timing-function: linear;   
  animation-iteration-count: 1;  
  animation-name:show; 
} 
 
 
.but2:checked ~ .block2{ 
  
   
   height: 200px;  
   
  animation-duration: 3s; 
  animation-timing-function: linear;   
  animation-iteration-count: 1;  
  animation-name:show; 
} 
 
.but3:checked ~ .block3{ 
  color:#f0f; 
   
   height: 200px;  
   
  animation-duration: 3s; 
  animation-timing-function: linear;   
  animation-iteration-count: 1;  
  animation-name:show; 
} 
 
 
@keyframes  show { 
0% { max-height: 0px; }	 
50% { max-height: 0px; } 
70% { max-height: 70px; } 
100% { max-height: 200px; } 
} 
 
@keyframes  revers { 
100% { height: 0px; }	 
50% { height: 0px; } 
30% { height: 70px; } 
0% { height: 200px; } 
}

<input type="radio" class="but1" checked name="rt"> 
<input type="radio" class="but2" name="rt"> 
<input type="radio" class="but3" name="rt"> 
 
<div class="block1">text1</div> 
<div class="block2">text2</div> 
<div class="block3">text3</div>