Question

我的设计师递给我一个设计我不是100％肯定如何处理jquery和css。我基本上试图允许用户“滑动”页脚以显示更多的内容。

我的HTML ..

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

我有一个onclick的切换按钮

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

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

由于

Answer 1

您可以利用JQuery UI 1.6的效果（Effects Demo Page）。以下为我完成了预期的效果。

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

注意：您可能希望使用缓动参数来获得所需的效果平滑度。

您需要拥有JQuery和JQuery UI Slide Effect的最新版本才能执行此操作。

Answer 2

尝试这样的事情：

<!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>

Answer 3

我的解决方案有点棘手。 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。

如果你想让'slide'div消失，请在slideToggle（）函数上添加一个回调，在'slide'div上调用hide（）。

如何使用jquery滑动内容

3 个答案: