jQuery UI使效果不那么突然和生涩

我有一个小的切换边栏，我正在使用jQuery UI。 问题是这是非常生涩的行为。 无论如何它可能看起来像左/右平滑滚动？

我试图让shell像内部容器滑动一样顺畅地滑动。 目前，一旦内部div完成宽松，它就会攫取。

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

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

Answer 1

问题出在auto 。 将其更改为某个修正值，您就完成了。

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

检查此演示

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; } 

JS

 $(document).ready(function(){ $('.o').click(function(){ $(this).toggleClass('out',1000); if ($('.i').css('display')=='block'){ $('.i').fadeOut('slow'); } else{ $('.i').fadeIn(1000); } }); });