如何制作侧边菜单动画？

Question

我正在尝试实现类似website中的侧边菜单。但经过数小时的编码后，我无法正常工作。你能帮帮我吗？

Here是我到目前为止所尝试的演示，以及下面的代码段。

$(function() {

  $('.slide-left-right').mouseenter(function() {
    var w = $(this).find('span:first').width();
    $(this).find('span:first').css({
      'background-color': '#000',
      'color': '#fff'
    });
    $(this).find('span:first').animate({
      width: '0px'
    }, 0);
    $(this).find('span:first').animate({
      width: w + 'px'
    }, 200);
  });

  $('.slide-left-right').mouseleave(function() {
    $(this).children('span').css({
      'background-color': '#fff',
      'color': '#000'
    });
  });

});

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 200px;
  margin: 0;
  font-size: 13px;
  padding: 0;
  list-style: none;
}
.sidebar-nav li {
  width: 200px;
  text-indent: 35px;
  line-height: 40px;
}
.sidebar-nav li a {
  text-decoration: none;
  color: #000;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.slide-left-right > a {
  text-decoration: none;
  color: black;
}
.slide-left-right {
  padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-nav">
  <li class="slide-left-right">
    <a href="index.html"><span>HOME</span></a>
  </li>
  <li class="slide-left-right">
    <a href="#"><span>WORK</span></a>
  </li>
  <li class="slide-left-right">
    <a href="#"><span>APPROACH</span></a>
  </li>
  <li class="slide-left-right">
    <a href="#"><span>ABOUT</span></a>
  </li>
  <li class="slide-left-right">
    <a href="#"><span>CONTACT</span></a>
  </li>
</ul>

Answer 1

您可以使用css代替此jquery。 http://ianlunn.github.io/Hover/ CSS3动力悬停效果的集合，适用于链接，按钮，徽标，SVG，特色图像等。

Answer 2

您可以使用CSS过渡制作相同的动画，并使用:before和:after伪元素作为背景。

<强> jsFiddle

body {
  background: silver;
}
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sidebar-nav li {
  margin: 0 0 10px;
}
.sidebar-nav li a {
  text-decoration: none;
  display: inline-block;
  color: black;
  position: relative;
  padding: 10px 15px;
  transition: color .25s;
}
.sidebar-nav li a:hover {
  color: white;
}
.sidebar-nav li a:hover:before {
  width: 100%;
}
.sidebar-nav li a:before,
.sidebar-nav li a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.sidebar-nav li a:before {
  background: black;
  z-index: -1;
  width: 0;
  transition: width .25s;
}
.sidebar-nav li a:after {
  background: white;
  z-index: -2;
  width: 100%;
}

<ul class="sidebar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Approach</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

另一种方法是使用linear-gradient()，不使用任何伪元素，样式可以更简单。

<强> jsFiddle

.sidebar-nav {
  background: silver;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sidebar-nav li a {
  text-decoration: none;
  display: inline-block;
  padding: 10px 15px;
  margin: 5px 10px;
  background: linear-gradient(to right, black 50%, white 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  color: black;
  transition: .25s;
}
.sidebar-nav li a:hover {
  background-position: 0 0;
  color: white;
}

<ul class="sidebar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Approach</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Answer 3

$( document ).ready(function() {

   $('.slide-left-right').mouseenter(function() {

  

var w = $（this）.width（）;

        $(this).find('span:first').css({'background-color': '#000',
                                      'color': '#fff'});


        $(this).find('span:first').animate({width: '0px'}, 0);
        $(this).find('span:first').animate({width: w + 'px'}, 200);

   });

   $('.slide-left-right').mouseleave(function() {

        $(this).children('span').css({'background-color': '#fff', 'color': '#000'});

   });

});