Jquery 如何从右向左滑动切换div？

请看这把小提琴

我想让链接<代码>图像链接从右向左滑动切换

$(document).ready(function() {
  $('.hidden').hide()
});

$('.soundDiv-link').click(function() {
  $('#soundDiv').slideToggle("slow")
});

$('.videoDiv-link').click(function() {
  $('#videoDiv').next().animate({width: 'toggle'}, "slow")
});

$('.imagesDiv-link').click(function() {
  $('#imagesDiv').animate({width: 'toggle'}, "slow")
});

---

你几乎是对的：

$('#videoDiv').next().animate({width: '100%'}, "slow");

但首先需要将宽度设置为0px

---

请参见此操作。

问题在于您已设置了左和右。只要将正确设置为0，它就会工作

---

用于从右向左滑动：

<div class="nav ">
       <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
       </ul>
   </div>

JS:

---

源文件：

谢谢，但这不是我需要的。我想让它看起来像是从屏幕右侧滑出。

<div class="nav ">
       <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
       </ul>
   </div>

.nav{
    position: fixed;
    right:0;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background-color: #333;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;

}
.nav-view{
    transform: translateX(0);
}

$(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});