Выталкивает нижний блок при анимации

243
29 августа 2017, 13:46

При клике выпадает текст и этим смещает блок, что идет дальше по коду. А хотелось бы чтоб он выпадал поверх. С помощью добавления position: absolute всё работает как надо, но кнопка исчезает. Хотелось, чтоб кнопка уезжала вместе с текстом. Возможно кто-то сталкивался и поможет с этим вопросом?

https://jsfiddle.net/3cdkhkdt/7/

Answer 1

Можно так:

$('.test').click(function() { 
  var test = $(this).prev(); 
  if (test.innerHeight() == 0) { 
    test.animate({ 
      height: test.prop('scrollHeight') + "px", 
    }, 1000); 
  } else { 
    test.animate({ 
      height: 0, 
    }, 1000); 
  } 
});
p { 
  padding: 0px; 
  margin: 0px; 
} 
 
.container { 
  position: relative; 
  padding-top: 40px; 
} 
 
.showhide { 
  position: absolute; 
  left: 0px; 
  top: 0px; 
} 
 
.test-block { 
  background-color: #E3DEDE; 
  height: 0; 
  overflow: hidden; 
} 
 
.test { 
  margin-top: 10px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="showhide"> 
    <p class="test-block">The best products begin with the best ingredients. Flour is milled only from select grades of the best wheat grains; the best nature has to offer, it looks like white powder. We have many varieties and formats for diverse applications.High quality 
      grade. This sort of flour is pretty clear from which is preparing only from well-peeled grains. This grade of flour characterize by a low content of gluten and large amount of starch. This grade of flour has white color with a light milky shade. 
      This grade often use in cooking, because batch turns out splendid and porous.The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which 
      makes it possible to get a very elastic dough. This grade of flour has a light yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of 
      grain envelopes this is allowing in the composition.</p> 
    <button class="test">test</button> 
  </div> 
  <p> 
    The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which makes it possible to get a very elastic dough. This grade of flour has a light 
    yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of grain envelopes this is allowing in the composition. 
  </p> 
</div>

А вообще, всю вашу анимацию раскрытия/скрытия блока можно уместить в одну строчку:

$('.test').on('click', function() { 
  $(this).closest('.showhide').find('.test-block').slideToggle(1000); 
});
p { 
  padding: 0px; 
  margin: 0px; 
} 
 
.container { 
  position: relative; 
  padding-top: 40px; 
} 
 
.showhide { 
  position: absolute; 
  left: 0px; 
  top: 0px; 
} 
 
.test-block { 
  background-color: #E3DEDE; 
  display: none; 
} 
 
.test { 
  margin-top: 10px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="showhide"> 
    <p class="test-block">The best products begin with the best ingredients. Flour is milled only from select grades of the best wheat grains; the best nature has to offer, it looks like white powder. We have many varieties and formats for diverse applications.High quality 
      grade. This sort of flour is pretty clear from which is preparing only from well-peeled grains. This grade of flour characterize by a low content of gluten and large amount of starch. This grade of flour has white color with a light milky shade. 
      This grade often use in cooking, because batch turns out splendid and porous.The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which 
      makes it possible to get a very elastic dough. This grade of flour has a light yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of 
      grain envelopes this is allowing in the composition.</p> 
    <button class="test">test</button> 
  </div> 
  <p> 
    The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which makes it possible to get a very elastic dough. This grade of flour has a light 
    yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of grain envelopes this is allowing in the composition. 
  </p> 
</div>

Answer 2

Попробуйте обернуть текст и кнопку в блок. Блоку задать нижний паддинг равный высоте кнопке. Блок - position:relative; У кнопки position:absolute; bottom:0; left - опционально.

READ ALSO
замена /n на &lt;br /&gt;

замена /n на <br />

Заменил таким образом textreplace(/\n/g, "<br />") но когда начинаю рендерить то почему то он просто пишет:

245
Отправка фрейма закрытия WebSocket Linux C

Отправка фрейма закрытия WebSocket Linux C

Пишу простой Socket server под Linux на ССтолкнулся к непонятной для меня проблемой

266
Найти id родителя Javascript

Найти id родителя Javascript

Есть такой код

190