滑动面板从左到右

Question

我有一个面板，它位于左侧，我尝试从左侧向右侧重新定位，任何人，我都可以Fiddle感谢您。

这是标记和我的js

＆＃13;

＆＃13;

$(function(){
	$(document).on('click','.slider-arrow.show',function(){
	    $( ".slider-arrow, .panel" ).animate({
          left: "+=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('«').removeClass('show').addClass('hide');
    });
	
	$(document).on('click','.slider-arrow.hide',function(){
	    $( ".slider-arrow, .panel" ).animate({
          left: "-=300"
		  }, 700, function() {
            // Animation complete.
          });
		  $(this).html('»').removeClass('hide').addClass('show');
    });
});

＆＃13;

.panel {
	width:300px;
	float:left;
	height:550px;
	background:#d9dada;
	position:relative;
	left:-300px;

}
.slider-arrow {
	padding:5px;
	width:10px;
	float:left;
	background:#d9dada;
	font:400 12px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	position:relative;
	left:-300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel">
      </div>
      
      <a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

主要是使用left和right位置属性将float更改为left。有更好的方法来解决这个问题，通常使用position: absolute，但这也有效。

body {
    overflow: hidden;
}

将防止在页面上出现水平滚动条。

https://jsfiddle.net/v58eozu1/2/