如何用jquery滑动内容开放

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

我的HTML ..

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

我有一个切换按钮的onclick

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

这滑动扩大页脚内容向下开口，然后向后滑动即可关闭。我希望它向上滑动然后关闭。

感谢

来源

2008-12-12 studiothat

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

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

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

您需要拥有最新版本的JQuery和JQuery UI Slide Effect才能这样做。

来源

2008-12-12 19:07:52 Manik

尝试这样：

<!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-12 18:45:21 cLFlaVA

我的解决办法是有点一招。您所需要的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消失，请在slide'div'上为slideToggle（）函数添加一个调用hide（）的回调函数。

来源

2008-12-12 18:51:53

如何用jquery滑动内容开放

回答

相关问题