jQuery、スライダーについて　完全に画面外へ出したくはない

お世話になります。
jQueryの記述について現在勉強しています。
下記コードでは「イベント」というところをクリックすると右側からコンテンツが出てきます。

実現したいこと

スライドバーを完全に隠さないで100pxほどは出しておきたい。

展開後にjQueryからCSSプロパティを変更する形で一度試してみたのですが、スムーズに動かず、ジャンプするかたちになってしまいます。

html
1<!DOCTYPE html>
2<html>
3<head>
4
5</head>
6<body>
7<div class="sidebar right">右サイドバー</div>
8<div class='fire' id='fire'>イベント</div>
9</body>
10</html>
11
12<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
13<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.1.0/jquery.sidebar.min.js"></script>
14<script>
15$(document).ready(function () {
16    $(".sidebar.right").sidebar({side:'right'});
17 
18    $("#fire").on("click", function () {
19        $(".sidebar.right").trigger("sidebar:toggle");
20        $(this).css
21        return false;
22
23    });
24});
25</script>
26<style>
27  .fire {
28    height: 100px;
29    width:100px;
30    background-color:lightblue;
31    display:block;
32    right:-500px;
33  
34  }
35    .sidebar{
36      position: fixed;
37      color: #fff;
38    }
39  
40      .sidebar.right {
41        top: 0;
42        right: 0;
43        bottom: 0;
44        width: 85%;
45        background: #448AFF;
46      }
47  
48  </style>

詳しい方、回答よろしくお願いします。

追記１

ライブラリのURL
ライブラリのURLです。本文に添付しておりませんでした、。申し訳ございません。

kei344

2020/05/14 05:28

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

Y.NINOMIYA

2020/05/14 08:07

申し訳ありません。本文に追記いたしました。ご確認ください。

行動規範の内容に同意します

回答1件

ベストアンサー

無理やりですが、とりあえず常時表示するようにしました。

HTML
1<div class="sidebar right"><div class="sidebar-inner">右サイドバー</div></div>

CSS
1.sidebar{
2  position: fixed;
3  color: #fff;
4  top: 0;
5  right: 0;
6  bottom: 0;
7}
8.sidebar.right {
9  transform: translateX(-100px);
10  width: 300px;
11  overflow: visible;
12}
13.sidebar-inner {
14  width: calc(100% + 100px);
15  background: #448AFF;
16  height: 100%;
17}
18```**動くサンプル：**[https://jsfiddle.net/bypmojrq/](https://jsfiddle.net/bypmojrq/)