Good day, the question about jquery and the animate function - there is a block that has a part of the text hidden, when the button is pressed, the block should smoothly lower and open completely, only my code does not work, and does not work in one direction, works smoothly to close, and the opening opens immediately.

<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 exercising ullamco laboris nisi ut aliquip ex ea commodo consequat. Duel aute irure dolor in voluptate 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

Read more

  $("#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 answers 3

    Explanation
    Correction, as an option to wrap the text in another div and set the height to be equal to it.

      $("#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>

    • Thanks, it helped. Thanks for the link to the explanation. - Stee1House

    Does not work - in the sense? Class adds? height: 100% should set the height to match the parent, in the example above, the height of the parent and child blocks will be the same (no other child blocks or a manually specified value).

    In general, a more complete code is needed.

    • He adds height and the block is lowered, but instantly, instead of a smooth descent. - Stee1House
    • It may be worth reading this at stackoverflow.com/questions/11792302/… . It seems to be the same problem. The decision was reduced, as I understand it to the calculation of absolute height, and not relative. - user3476487 pm

    Try setting the height in pixels for 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/