jQuery文本动画从右到左

Question

我试图实现与jQuery动画相同的社交共享动画，当您单击共享时，站点在页脚中使用该动画。

我试图构建动画，但切换列表的行为并不像预期的那样。

我的标记

<div id="social-media">
<a href="#" class="social-shares"> SHARE</a>

<ul class="social-media-channels">
  <li><a href="">Facebook</a></li>
  <li><a href="">Twitter</a></li>
  <li><a href="">Google+</a></li>
</ul>
</div> 

CSS

#social-media {
  margin: 0 auto;
  width: 500px;
}
#social-media a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}
#social-media a:hover {
  color: silver;
}
#social-media .social-shares {
  float: right;
}
#social-media ul.social-media-channels {
  margin: 0;
  padding: 0;
  position: relative;
  float: right;
  margin-right: 15px;
  display: none;
}
#social-media ul.social-media-channels li {
  display: inline;
}

jQuery

$(document).ready(function() {
  $('.social-shares').on('mouseover', function() {
    $('.social-media-channels').animate({
      width: 'toggle'
    }, 350);
  })
})

这里是我的密码

Answer 1

只需在ul中增加一个高度

ul.social-media-channels {
    margin: 0;
    padding:0;
    position:relative;
    float:right;
    margin-right:15px;
    display:none;
    height:20px;
    li{
      display:inline;
    }
  }
}

http://codepen.io/anon/pen/JdyQRG

Answer 2

向以下css添加高度：

#social-media ul.social-media-channels {
  margin: 0;
  padding: 0;
  position: relative;
  float: right;
  margin-right: 15px;
  display: none;
  height: 20px;
}

工作码