jQuery UI使得效果不那麼突然和生澀

我有一個小切換邊欄，我使用的是jQuery UI。問題是這是非常生澀的行爲。無論如何，它可能看起來像一個平滑的滾動左/右？jQuery UI使得效果不那麼突然和生澀

我想讓外殼像內部容器滑動一樣平滑滑動。目前在內部股利盤完成寬鬆後，股價一直在上漲。

$(".snapper").click(function() { 
$(".sidebar-wrapper").toggle("slide", { direction: "right" }, 1000); 
$("#sidebar").css("width" , "auto"); 
});

在線示例。 http://frontendtrends.com/sidebar/

來源

2013-06-03 ndesign11

的jQuery的原因切換動畫是生澀通常是由於jQuery的錯估目標寬度/高度。計算是通過將元素放置在一個虛擬元素中來完成的，該虛擬元素模仿父級並使其成爲「display：block」。如果父元素或滑動的元素沒有定義的寬度/高度，jQuery可能會將其誤判爲比應該更小或更大。元素和/或它的父元素上的填充和邊距也會導致這種情況。 –

我爲兩個容器定義了寬度，並且在#sidebar快照時它仍然簡化了內容。 – ndesign11

問題出在auto。改變它到一些固定值，你就完成了。

$("#sidebar").css("width" , "200px");

檢查此Demo

CSS

.o{ 
    display:block; 
    float:right; 
    width:30px; 
    border-radius:10px; 
    height:300px; 
    overflow:hidden; 
    background-color:black; 
} 

.out{ 
    display:block; 
    float:right; 
    width:40%; 
    border-radius:10px; 
    height:300px; 
    background-color:black; 


} 

.i{ 
    display:none; 
    width:200px; 
    border-radius:10px; 
    height:200px; 
    overflow:hidden; 
    background-color:grey; 
    margin:10px 50px 10px 10px; 
} 

.i2{ 
    display:block; 
    width:100px; 
    border-radius:10px; 
    height:100px; 
    background-color:orange; 
    margin:10px 50px 10px 10px; 
}

$(document).ready(function(){ 
    $('.o').click(function(){ 
    $(this).toggleClass('out',1000); 

    if ($('.i').css('display')=='block'){ 
    $('.i').fadeOut('slow'); 
    } 
    else{ 
    $('.i').fadeIn(1000); 
    } 
    }); 
    });

來源

2013-06-03 17:56:09 Arpit

我有在CSS中設置的寬度。我繼續前進，嘗試了你的改變，它只是讓邊欄更小，但它仍然是生澀。 – ndesign11

你可以發佈模擬你的問題的jsbin.com鏈接。 – Arpit

我在OP – ndesign11

jQuery UI使得效果不那麼突然和生澀

回答

相關問題