ChesterLife
@ChesterLife

Как сделать мгновенное раскрытие блока?

Есть js код плавно раскрывающегося блока. Как сделать так, чтобы он раскрывался мгновенно?

var array = new Array();
var speed = 200;
var timer = 1;

// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
function sljsexslider(target,showfirst) {
  var sljsexslider = document.getElementById(target);
  var divs = sljsexslider.getElementsByTagName('div');
  var divslength = divs.length;
  for(i = 0; i < divslength; i++) {
    var div = divs[i];
    var divid = div.id;
    if(divid.indexOf("sljsexheader") != -1) {
       div.onclick = new Function("processClick(this)");
       } else if(divid.indexOf("sljsexcontent") != -1) {
       var section = divid.replace('-sljsexcontent','');
       array.push(section);
       div.maxh = div.offsetHeight;
       if(showfirst == 1 && i == 1) {
          div.style.display = 'block';
          } else {
          div.style.display = 'none';
          }
       }
    }
}

// Process the click - expand the selected content and collapse the others 
//
function processClick(div) {
  var catlength = array.length;
    for(i = 0; i < catlength; i++) {
      var section = array[i];
      var head = document.getElementById(section + '-sljsexheader');
      var cont = section + '-sljsexcontent';
      var contdiv = document.getElementById(cont);
      clearInterval(contdiv.timer);
      if(head == div && contdiv.style.display == 'none') {
        contdiv.style.height = '0px';
        contdiv.style.display = 'block';
        initSlide(cont,1);
        } else if(contdiv.style.display == 'block') {
        initSlide(cont,-1);
        }
      }
   }

// Setup the variables and call the slide function //
function initSlide(id,dir) {
 var cont = document.getElementById(id);
 var maxh = cont.maxh;
 cont.direction = dir;
 cont.timer = setInterval("sljsexslide('" + id + "')", timer);
}

// Collapse or expand the div by incrementally changing the divs height and 
opacity //
function sljsexslide(id) {
  var cont = document.getElementById(id);
  var maxh = cont.maxh;
  var currheight = cont.offsetHeight;
  var dist;
  if(cont.direction == 1) {
    dist = (Math.round((maxh - currheight) / speed));
    } else {
    dist = (Math.round(currheight / speed));
    }
  if(dist <= 1) {
    dist = 1;
    }
  cont.style.height = currheight + (dist * cont.direction) + 'px';
  cont.style.opacity = currheight / cont.maxh;
  cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + 
  ')';
  if(currheight < 2 && cont.direction != 1) {
    cont.style.display = 'none';
    clearInterval(cont.timer);
    } else if(currheight > (maxh - 2) && cont.direction == 1) {
    clearInterval(cont.timer);
    }
  }


Код HTML:

<div class="sljsexheader" id="1-sljsexheader"> Заголовок </div>
    <div class="sljsexcontent" id="1-sljsexcontent">
      <div class="sljsextext">
        <p> Текст </p>
      </div>
    </div>
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
rework
@rework
Помог ответ? В благодарность отметь его решением
Установите следующие значения для переменных сверху скрипта:

var speed = 1;
var timer = 0;


Вот пример: cssdeck.com/labs/dvftutyv

Но сам по себе скрипт выглядит странно и подход к реализации сильно устарел , сейчас такие штуки просто на css делают.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
10 мая 2024, в 11:47
500 руб./за проект
10 мая 2024, в 11:36
30000 руб./за проект
10 мая 2024, в 11:27
1000 руб./за проект