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

多分これは役立つかもしれません、

円にクリック可能なリンクを含める必要がない場合は、透明な画像を上に配置できます。Google で見つけた画像を使用したため、幅と高さを変更する必要がありました。

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

黒い枠線は画像に付属しているため、独自に作成する必要があります

于 2012-07-24T08:17:51.100 に答える