0

Доброго времени суток, вопрос про jquery и функцию animate - есть блок у которого скрыта часть текста, внизу кнопка при нажатии блок должен плавно опускаться и открываться полностью, только мой код не работает, притом не работает в одну сторону, рабтает на закрытие плавно, а на открытие сразу открывается.

<style>
#moon-slide {
  height: 80px;
  overflow: hidden;
}
</style>

<div id="moon-slide">
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur 

adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Подробнее

    $("#click-moon").click(function () {
            var moonSlide = $("#moon-slide");

            if (!moonSlide.hasClass("show")) {
                moonSlide.animate({
                    height: "100%"
                }, 1000, function () {
                    moonSlide.addClass('show');
                });
            } else {
                moonSlide.animate({
                    height: "79px"
                }, 1000, function () {
                    moonSlide.removeClass('show');
                });
            }
        });

3 ответа 3

1

Объяснение
Исправление, как вариант обернуть текст в еще один div и задавать высоту равной ему.

 $("#click-moon").click(function() {
   var moonSlide = $("#moon-slide");

   if (!moonSlide.hasClass("show")) {
     moonSlide.animate({
       height: $('#moon-slide div.wrap').height() + 'px'
     }, 1000, function() {
       moonSlide.addClass('show');
     });
   } else {
     moonSlide.animate({
       height: "79px"
     }, 1000, function() {
       moonSlide.removeClass('show');
     });
   }
 });
#moon-slide {
  height: 80px;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="moon-slide">
  <div class="wrap">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut libero voluptatum cupiditate necessitatibus deleniti quam voluptates dolores non quisquam porro impedit temporibus velit officia veritatis ad itaque culpa facilis. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Error porro maxime repellendus dolorum similique officiis voluptate eaque perferendis inventore maiores voluptatibus iusto eius illum earum nulla laborum ullam alias non.
    lorem 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut libero voluptatum cupiditate necessitatibus deleniti quam voluptates dolores non quisquam porro impedit temporibus velit officia veritatis ad itaque culpa facilis. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Error porro maxime repellendus dolorum similique officiis voluptate eaque perferendis inventore maiores voluptatibus iusto eius illum earum nulla laborum ullam alias non.
    lorem 
  </div>
</div>
<button id="click-moon">Ok</button>

1
  • Спасибо, помогло. Спасибо за ссылку на объяснения.
    – Stee1House
    15 июн 2015 в 20:42
0

Не работает - в смысле? Класс добавляет? height:100% должно задать высоту, совпадающую с родительской, в приведённом же примере высота родительского и дочернего блока будет одинакова (нет других дочерних блоков или заданной вручную величины).

В общем, нужен более полный код.

2
  • Он высоту добавляет и блок опускается, но мгновенно, вместо плавного спуска.
    – Stee1House
    15 июн 2015 в 20:37
  • Возможно, стоит прочесть это stackoverflow.com/questions/11792302/… . Вроде бы такая же проблема. Решение свелось, как я понимаю к расчёту абсолютной высоты, а не относительной. 15 июн 2015 в 20:41
0

Попробуйте указать высоту в пикселях для animate:

    var moonSlide = $("#moon-slide");

$("button").click(function(){

    if (!moonSlide.hasClass("show")) {
        moonSlide.animate({
            height: "300px"
        }, 1000, function () {
            moonSlide.addClass('show');
        });
    } else {
        moonSlide.animate({
            height: "79px"
        }, 1000, function () {
            moonSlide.removeClass('show');
        });
    }   
});

http://jsfiddle.net/29pz1h4h/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.