如何用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滑動內容開放

回答

相關問題