如何提高滑出宽度

Question

我想改变这个滑动面板在这个小提琴中的距离。为此，我使用了这个小提琴的代码。在这种情况下，如果我将slideit的宽度和左边的close设置更改为200而不是100，宽度就会增加，并且工作正常。但如果我也这么做，面板就消失了。我猜当我把它转换到左边的时候，我没有正确地改变它。谁能解释如何增加宽度，使面板滑得更远？

    <style>
    div#slideit {position: fixed; top: 100px; left:0px; margin: 0px; padding: 20px 0px 0px; color:#fff; background:#5681b4; list-style: none; z-index:9999; width: 100px; border-radius:0px 30px 30px 5px}
    div#slideit .slideit-btn {background:#5681b4; border-radius:0px 10px 10px 0px; position:absolute; top:10px; left:90px; width:40px; height:70px; display:block; cursor:pointer;}
    div#slideit .slideitspan {width:100px; margin:4px 2px; text-align:center; text-decoration:none; color:#FFF;}
    .vertical-text {
     font-size:18px; 
     transform: rotate(90deg);
     transform-origin: left top 0;
     position:absolute; top: 10px; left:34px;
    }
    </style>

    <div id="slideit">
     <div class="slideit-btn"> <span class="vertical-text"></span></div>
     <div class="slideitspan">You can now easily create banners, configure them as you like, link them to anywhere you want, like to products, categories, any page of your store or any other website and display them on various areas of your store, for example the front page. Learn more on the mini template system usage page </div>
    </div>   

    <script>
    $(function() {
     $.fn.ToggleSlide = function() {
         return this.each(function() {
             //$(this).css('position', 'absolute');

             if(parseInt($(this).css('left')) < 0) {
                 $(this).animate({ 'left' : '0px' }, 120, function() {
                 $(".vertical-text").text("Close");
                     //$(this).css('position', 'relative');
                 });
             }
             else {
                 $(this).animate({ 'left' : '-100px' }, 120, function() {
                 $(".vertical-text").text("Open");
                     //$(this).css('position', 'relative');
                 });
             }
         });
     };

    $('#slideit').ToggleSlide();

     $(".slideit-btn").bind("click", function() {
         $('#slideit').ToggleSlide();
     });
    });
    </script>

Answer 1

非常直截了当。增加html元素的宽度

*{box-sizing: border-box;}
#slideit, #slideit .slideitspan{width:300px;}
#slideit .slideitspan{padding: 30px;}
#slideit .slideit-btn{left: initial; right: -32px;}

然后将js应用的偏移量调整到相同的数量：

$(this).animate({ 'left' : '-300px' }, 120, function() {...

https://jsfiddle.net/2c7rzm3q/