Как открыть слайд с помощью jquery

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

Мой HTML ..

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

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

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

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

Спасибо

12.12.2008 18:32:49
3 ОТВЕТА
РЕШЕНИЕ

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

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

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

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

9
16.10.2012 03:38:52

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

<!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>
1
12.12.2008 18:45:21

Мое решение немного хитрость. Функция 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.12.2008 18:51:53