jQuery slideDown與jQuery UI .show（'slide'）

我試圖利用jQuery的內置效果功能來創建一個從導航欄後面滑出的「抽屜」，將它下面的內容推出辦法。jQuery slideDown與jQuery UI .show（'slide'）

如果我使用$('#drawer').slideDown()，內容將被排除，但內容實際上不會「滑下」。這更多的是揭示內容。

如果我使用$('#drawer').show('slide',{direction:'up'})，內容正確地滑落，但元素下面的所有內容都會跳出來，然後纔會出現效果。

有沒有一種方法可以將這兩種方法中最好的方法結合起來，以便複製我正在尋找的效果：滑出的抽屜，將內容推下去的方式？

我已經調查過jQuery UI的.animate()函數，但文檔沒有幫助。我使用它的原始努力充滿了失敗。

而且，萬一有人問，對不起，我不能顯示的例子，但我們希望它像抽屜的jQuery插件功能：

http://lib.metatype.jp/jquery_drawer/sample.html

但是，插件不完全是我們需要的，否則我只會使用它（不使用項目符號列表或AJAX內容）。但是，那裏的效果就是我們想要的。

更新：我也嘗試過通過的jQuery插件抽屜的這部分代碼，但它並沒有在所有的動畫：

$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 });

爲了澄清，太，這是一個功能OpenDrawer()內稱那因此被稱爲：

$(document).ready(function() { 
    OpenDrawer(); 
});

因爲默認情況下它會在頁面加載時加載。

來源

2010-01-06 Ben Dyer

是的，它就像手風琴的行爲，除了你也可以滑動它。我已經使用這個功能來創建我認爲你正在尋找的東西。

$('#drawer').slideDown('slow');

通過改變速度，你可以得到不同的滑動速度，看你想要的方式。現在，即使你有抽屜元素，你也需要一個最初隱藏的容器，它將會滑動。假設您有一個ID爲「drawer」的按鈕，以及一個ID爲「myDrawerContent」的容器。你會做到以下幾點，

$('#drawer').click(function() { 
    $('#myDrawerContent').slideDown('slow'); 
}

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function() { $('#drw_loader').fadeOut(function() { $('#drw_ajax').fadeIn(); }); 
});

希望這有助於。

都市報

來源

2010-01-06 19:24:36 Metropolis

好吧，這也不是我的問題。 slideDown（）工作正常，但它實際上不是「滑動」。這更多的是「擦拭」效果。這對於很多目的來說都很好，但是我希望內容似乎滑落下來，而不是「顯露」。 – 2010-01-06 19:58:17

您顯示的鏈接（http://lib.metatype.jp/jquery_drawer/sample.html）正在使用動畫。我會在上面發表。 – Metropolis 2010-01-06 20:30:55

更接近，但我認爲這是jQuery Drawer代碼的錯誤部分。這是爲了在AJAX內容加載後關閉加載器。我嘗試在代碼中更早地借用一行（請參閱更改的問題），但這根本不起作用。我覺得我走在正確的軌道上，但這還沒有真正接近工作。 – 2010-01-06 21:08:28

你在你的問題的更新有JavaScript的工作，但它需要包含的內容，而不是內容本身的元素上進行操作。

要看到這個動作，環繞元素#drawer另一個div：

<div id='container'> 
    <div id='drawer'>...</div> 
<div>

和動畫容器：

$('#container') 
    .css({ marginTop: $('#container').height() * -1 }) 
    .animate({ marginTop: 0 });

來源

2010-01-06 22:08:08

+1簡單而有效 – vikmalhotra 2011-11-26 01:38:33

我相信你正在尋找一個效果更像是「盲'：

$('#drawer').show('blind');

奇怪的是$ .fn.slideDown（）和$ .fn.show（'幻燈片'）不以相同的方式操作，而是'盲'。 'slide'會創建一個與對象大小相同的佔位符，然後滑入視圖框中，而盲調整元素的高度或寬度，直到其展開爲正確的大小（而溢出設置爲隱藏）。所以實際上，效果名稱是正確的，但由於傳統名稱$ .fn.slideDown（）有一些混淆。

來源

2010-05-17 20:49:26

我一直在尋找這個AGES！非常感謝。 – Ashitaka 2012-04-05 20:53:31

這是一個後期的帖子，但我遇到了這個問題，並設法使一些有用的東西。

我不是一個jQuery或Javascript大師，所以不要苛刻這個快速的解決方案。

這是一個小例子。必須遵守效果的順序。您可以使用動畫時間長度來玩一個非常好的繪圖效果。

我只是很快測試了FF 3.6

您可以嘗試在谷歌代碼操場的例子。 http://code.google.com/apis/ajax/playground/#jqueryui

點擊編輯html，粘貼代碼並點擊運行代碼。的例子應該是工作

希望對大家有所幫助

<html> 
<head> 
<!--<script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.6.min.js"></script>--> 
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
    </script> 
</head> 
<body> 
<script> 
jQuery(function() 
{ 
    // We bind the <a>I'm the push link!</a> click event to the toggle function 
    $("#topPart a").click(function() 
             { 
              toggleSlide(this); 
             });     
}); 
function toggleSlide(element) 
{ 
    var drawer = jQuery("#drawer"); 
    var content = jQuery("#drawerContent"); 
    if (jQuery(content).is(":hidden")) 
    { 
     // The order here is important, we must slide juste before starting blinding 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "show"}, 500); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 490); 

        },1); 
    } 
    else 
    { 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "hide" }, 500); 
         // The previous blind effect hide the drawer 
         // However we want it to be shown again, if not the next "drawer opening effect" won't play 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 1); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "hide" }, 460); 
        },1); 
    } 
} 

</script> 

    <div id="topPart"> 
     <a href="javascript:void(0)">I'm the push link!</a> 
    </div> 
    <div id="drawer"> 
     <div id="drawerContent" style="display:none;border:1px solid transparent;width:600px;"> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, .... 
     </p> 
     <p> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
     </div> 
    </div> 
    <div id="bottomPart"> 
    I want to be pushed nicely 
    </div> 
</body> 
</html>

來源

2010-11-23 05:17:32 grifos

感謝您的回答。一直在爲AGES尋找類似的東西（真正的滑下效果）。 – katebp 2011-05-24 11:13:56

@katebp，我真的同意你的看法，贊同'grifos'。 – NullPointer 2014-07-17 06:50:41

我一直在尋找一個體面的實現這一（看似簡單）效果太強了，這是最好的一個，我發現： http://eric.muyser.com/work/jquery/drawer/example/

在這裏看到更多的信息/代碼的/ etc： http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

但是，它仍然顯得矯枉過正，需要歸結成裸精華動畫插件，可以調用/應用通過.show（），這正是你期望已經在jQuery /用戶界面作爲標準在第一位存在...但遺憾的是不是...

來源

2011-11-17 14:50:03 MarcusTucker

jQuery slideDown與jQuery UI .show（'slide'）

回答

相關問題