Как сдвинуть содержимое, открывающееся с помощью jquery - PullRequest
Новая
       9

Как сдвинуть содержимое, открывающееся с помощью jquery

6 голосов
/ 12 декабря 2008

Мой дизайнер вручил мне дизайн, я не уверен на 100%, как это сделать с jquery и css. Я просто пытаюсь позволить пользователю «сдвинуть» нижний колонтитул, чтобы раскрыть больше контентов.

Мой HTML .. 

 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>

У меня есть кнопка, которая нажимает 

$('#expandingFooter').slideToggle();

Сдвигает открывающееся содержимое нижнего колонтитула вниз, а затем сдвигается вверх, чтобы закрыть его. Я бы хотел, чтобы он скользил вверх, а затем закрывался.

Спасибо

Ответы [ 3 ]

9 голосов
/ 12 декабря 2008

Вы можете использовать эффекты JQuery UI 1.6 ( Страница демонстраций эффектов ). Следующее достигло желаемого для меня эффекта. 

$('#toggleButton').bind('click', function(e) {
    $('#expandingFooter').toggle(
        'slide', 
        { easing: 'easeOutQuint', direction: 'down' }, 
        1000
    );
});

Примечание: Вы можете поиграть с параметром замедления, чтобы получить желаемую плавность эффекта.

Для этого вам понадобятся последние версии JQuery и JQuery UI Slide Effect .

1 голос
/ 12 декабря 2008

Мое решение немного хитрое. Функция slideUp (), как вы хотите, не встроена в JQuery, потому что способ ее достижения зависит от вашего дизайна html / css. Нормальный поток сверху вниз.

Я предлагаю это: 

<a id="toggle">Toggle()</a>

<div id="slide" style="position:relative; height: 100px">

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue"">
        <p>Suspendisse potenti. Vivamus libero. Dummy Text</p>
    </div>

</div>


<script type="text/javascript">
    $('.hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

    $('#toggle').click(function () {
        $('#slideInner').slideToggle();
    });
</script>

Этот код является только примером. Переместите встроенный CSS на внешний лист. То же самое для javascript.

Если вы хотите, чтобы div «slide» исчез, добавьте обратный вызов в функцию slideToggle () и вызов hide () для div «slide».

1 голос
/ 12 декабря 2008

Попробуйте что-то вроде этого: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script>
    <script type="text/javascript">
    <!--
  $(document).ready(function(){
    $("#footer").click(function () {
      if ($("#expandingFooter").is(":hidden")) {
        $("#expandingFooter").show("slow");
      } else {
        $("#expandingFooter").slideUp();
      }
    });
    $("#expandingFooter").hide();
  });
    //--></script>

</head>

<body>
 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>
</body>
</html>
...