1

我有一个圆圈列表，当单击该圆圈时，会在原始圆圈内显示从上到下的 div (.active) 动画。在 Firefox 中，动画 div 被屏蔽，但在 Safari 和 Chrome 中，可以看到动画 div (.active)，并且不会将自己隐藏到父 li。

我看过其他一些关于这个问题的帖子，但不是关于动画的。

有没有其他人遇到过这个问题或知道解决方案？

HTML

<ul class="circles">
  <li class="image-1"><div class="active"><p>text text</p></div></li>
  <li class="image-2"><div class="active"><p>text text</p></div></li>
  <li class="image-3"><div class="active"><p>text text</p></div></li>                                                                          
</ul> 

CSS

ul.circles li{float:left; text-align: center; background-color:blue; height:186px; width:186px; border-radius:200px; border:10px solid white; overflow:hidden; display:block; position:relative;}
ul.circles li.image-1{background:url(image.png) 0 0 no-repeat;}         
ul.circles li .active{background: rgb(154, 189, 44); position:relative; width:186px; height:186px; top:190px; border-radius:200px;} 

JS

$('.circles li').toggle(function() {
    $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 )
},function() {
    $(this).find('div').animate({opacity: 0.7, top:'190px'}, 1000 );
});
4

1 回答 1

0

也许这可以帮助，

如果圆圈不必包含可点击的链接，您可以在顶部放置一个透明图像，我使用的是我在谷歌上找到的图像，所以我必须更改宽度和高度。

http://jsfiddle.net/PrZZc/22/

黑色边框随图像一起提供，因此您必须创建自己的

于 2012-07-24T08:17:51.100 回答