Question

我尝试使用jQuery动画制作相同的动画，以便在点击“分享”时，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

Answer 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

Answer 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

jQuery文本动画从右到左

2 个答案: