jQuery UI使效果不那么突然和生涩 [英] jQuery UI make the effect less abrupt and jerky

问题描述

我有一个使用jQuery UI的切换小工具栏.问题在于这是非常生涩的行为.无论如何，看起来像是向左/向右平滑滚动?

I have a little toggle sidebar that I am using jQuery UI. The problem is it is very jerky behavior. Anyway to may it look like a smooth scroll left/right?

我正在尝试使外壳像内部容器一样平滑地滑动.目前，一旦内部div完成缓动，它就会开始抓紧.

I am trying to get the outer shell to slide smoothly like the inner container slides. Currently it is snapping once the inner div is finished easing.

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

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

推荐答案

问题出在auto.将其更改为某个固定值就可以完成.

The problem is with auto. change it to some fix value and you are done.

$("#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);
    }
  });
  });

这篇关于jQuery UI使效果不那么突然和生涩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！