重構jquery動畫

我使用here的datepicker插件 - 示例位於頁面的底部。重構jquery動畫

它利用jQuery的動畫（）這樣的：

$('#widgetField>a').bind('click', function(){ 
    $('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500); 
    state = !state; 
    return false; 
});

我需要如何重構成手風琴狀擴張DIV此操作的建議。我不希望日曆浮動，我需要它將div內容壓低。

建議？

來源

2011-11-30 chrislovecnm

你檢查了jquery ui - 會給你兩個本地datepicker和手風琴擴展div – alonisser

感謝您的建議！我看到了完全相同的問題。我不能有一個浮動div。直接在日曆下面的內容需要被推下來......該日曆上的z-index也使它浮動... – chrislovecnm

與CSS一樣被重新標記，這是這裏的主要問題 – alonisser

更新回答

小部件漂浮，因爲它有一個位置是：絕對的;和jquery函數中的高度偏移量。

參見CSS：

#widgetCalendar有一種風格，位置：絕對的。您需要將其刪除，這會使其工作，但是隨後會出現其他樣式問題，這些問題都可以通過CSS調整來處理。

或者，你可以嘗試使用jQuery .slidedown：

$('#widgetCalendar').slideDown();

那麼你就不需要高度偏移。

如果你能做一個jsfiddle，那將是非常好的，因爲我無法測試，而無法看到你在做什麼。

編輯 - 用戶不使用jQuery UI的

這是由於jQuery用戶界面的性質 - 日曆是一個專門的對話。 jQuery UI對話框是一個popin。但是，您可以抵消這一點：

<script> 
$(function() { 
    $("#datepicker").datepicker(); 
}); 
</script>

顯示嵌入在頁面中的日期選擇器而不是疊加層。只需在div上調用.datepicker（）而不是輸入。

來源

2011-12-09 15:03:02 Jason

我不使用jqueryui ... – chrislovecnm

@chrislovecnm - 查看更新的答案 – Jason

非常感謝！將試試 – chrislovecnm

重構jquery動畫

回答

相關問題