6

我的设计师递给我一个我不是 100% 确定如何使用 jquery 和 css 的设计。我基本上是在尝试让用户向上“滑动”页脚以显示更多内容。

我的..

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

我有一个 onclick 的切换按钮

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

这会将展开的页脚内容向下滑动打开，然后向上滑动以关闭。我希望它向上滑动然后关闭。

谢谢

4

3 回答 3

9

您可以利用 JQuery UI 1.6 的效果（效果演示页面）。以下为我完成了预期的效果。

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

注意：您可能需要使用 easing 参数来获得所需的平滑度。

您需要拥有最新版本的JQuery和JQuery UI 幻灯片效果才能执行此操作。

于 2008-12-12T19:07:52.200 回答
1

尝试这样的事情：

<!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>
于 2008-12-12T18:45:21.200 回答
1

我的解决方案有点小技巧。您想要的 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 消失，请向 slideToggle() 函数添加一个回调，在“幻灯片”div 上调用 hide()。

于 2008-12-12T18:51:53.700 回答