单击时将div向右和向左滑动

Question

我有一个导航栏，在移动设备上它已经溢出，人们可以看到他们需要向右或向左滚动的所有选择。我想添加带箭头的按钮，这样当人们点击的时候，比如在右边的按钮上，nabber就会自动向右滑动。

我已经试过jQuery了

$('#admin-menu').animate({width:'toggle'},350);
or
$(#admin-menu).show("slide", { direction: "left" }, 1000);
or
$('#admin-menu').slideToggle( "slow" );

但这一切似乎都不像我想要的那样，它让那个笨蛋消失了。

带有滑块的菜单栏

<nav id="admin-menu">
    <span class="tab active" id="locations-tab">
      <h6>Dashboard</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
</nav>

//The button to slide
    <i class="fas fa-chevron-circle-right right-slider" onClick="slider()"></I>

函数

function slider(){
    console.log('Im here!!')

    $('#admin-menu').animate({width:'toggle'},50);
}

我希望能够单击该按钮，并使导航栏滚动到左侧。

Answer 1

你可以使用CSS翻译来实现这一点，在点击按钮或类似的东西时激活。

$("#btn").click(function() {
  $("#test").css("transform", "translateX(100px)");
});

https://codepen.io/anon/pen/MRJzog

Answer 2

希望这能对你有所帮助。

​

$(".left-slider").click(function(){
	$('#admin-menu').animate({width:'hide'},1000);
});

$(".right-slider").click(function(){
	$('#admin-menu').animate({width:'show'},1000);
});

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="admin-menu">
    <span class="tab active" id="locations-tab">
      <h6>Dashboard</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
    <span class="tab" id="users-tab">
       <h6>Users</h6>
    </span>
</nav>
<i class="fas fa-chevron-circle-left left-slider"></i>
<i class="fas fa-chevron-circle-right right-slider"></i>

​