0

jQuery UI を使用している小さなトグル サイドバーがあります。問題は、非常にぎくしゃくした動作であることです。とにかく、左右にスムーズにスクロールするように見えるかもしれませんか？

内側の容器がスライドするように、外側のシェルがスムーズにスライドするようにしています。現在、内側の div のイージングが完了するとスナップされます。

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

オンラインの例。 http://frontendtrends.com/sidebar/

4

1 に答える 1

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);
    }
  });
  });
于 2013-06-03T17:56:09.923 に答える