0

Здравствуйте, начал изучать jquery. Пишу первый плагин "Читать далее", то есть хочу чтобы изначально блок был 15px высоту, а при нажатии на ссылку, блок с анимацией открылся полностью, и по повторному нажатию на кнопку блок сворачивается .

Вот к чему я пришел (прошу не кричать, что гавнокод и т.д.)

<script type="text/javascript">
$(document).ready(function(){

$('#show_more').toggle(
    function(){
       $("#show_desc").animate({
        height: auto
      }, 500 );
    $('#show_more').text('Свернуть');
    },  function(){
        $("#show_desc").animate({
        height: '15px'
      }, 500 );
      $('#show_more').text('Читать далее');
    }
)
});
</script>

<a href="#" id="show_more">Свернуть</a>
<div id="show_desc" style="height: 15px;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>

Но что-то как-то не то :) Рад услышать ваши варианты либо поправки.

2 ответа 2

1

height: "auto" - нужно в кавычки

<script type="text/javascript">
$(document).ready(function(){

$('#show_more').toggle(
    function(){
       $("#show_desc").animate({
        height: "15px"
      }, 500 );
    $('#show_more').text('Свернуть');
    },  function(){
        $("#show_desc").animate({
        height: $("#inner").height()+'px'
      }, 500 );
      $('#show_more').text('Читать далее');
    }
)
});
</script>

<a href="#" id="show_more">Свернуть</a>
<div id="show_desc" style="height: 15px;overflow:hidden"><div id="inner">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div></div>
5
  • только auto здесь не очень подходить, потому то после height: '15px' - auto будет 15px 18 янв 2012 в 10:27
  • как то не правильно работает. при одном нажатии, пропадает сразу весь текст и сразу же появляется
    – dogmar
    18 янв 2012 в 10:27
  • Лучше использовать внешний блок - а относительно его и брать height. 18 янв 2012 в 10:28
  • А можете отредактировать мой код? =)
    – dogmar
    18 янв 2012 в 10:29
  • Спасибо,только в вашем примере функции в toggle я поменял местами : ) и все отлично.
    – dogmar
    18 янв 2012 в 10:53
0

overflow: hidden; Вам в помошь! При клике развернуть, для height лучше задавать пустое значение, и убирать overflow. При клике свернуть вернуть все в исходное!

Ваш ответ

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

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