从右到左的 jQuery 文本动画答案

【问题标题】：jQuery text animation from right to left从右到左的 jQuery 文本动画
【发布时间】：2015-06-17 18:12:48
【问题描述】：

我尝试使用 jQuery animate 实现相同的动画，用于社交分享 site 在您单击“分享”时在页脚中使用的内容。

我试图构建动画，但切换列表的行为与预期不符。

我的标记

<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);
  })
})

here 是我的密码笔

【问题讨论】：

很抱歉他先有 codepen，但我给了你一个赞成票

标签： jquery animation text

【解决方案1】：

为以下 css 添加高度：

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

working codepen

【讨论】：

【解决方案2】：

只需为 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

【讨论】：