0 
<div class="notice_container" id="showMe">
    <div class="notice">some notice!</div>
</div>

ここでJSFiddle。(「実行」をクリックするとアニメーションが表示されます)

.notice親の CSS 不透明度を継承する必要はありません。jQuery animate to で opacity が割り当てられることに注意してください.notice_container。

$('#showMe').css({
    "opacity": 0,
    "display": "block"
}).animate({
    opacity: .7
}, 1200)

.notice不透明度を継承するのはなぜですか? コンテナの外側に配置すると、フェードイン効果が失われます。赤いボックスを完全に不透明にし、黒いコンテナをわずかに透明にしたいのですが、可能ですか? そしてどうやって？

どうもありがとう。

解決策が機能しない - これは継承の問題を解決しますが、jQuery はアニメーション化に失敗します。

$('#showMe').css({
    backgroundColor: "rgba(0, 0, 0, 0)",
    "display": "block"
}).animate({
    backgroundColor: "rgba(0, 0, 0, 1)"
}, 1200);

参照: http://jsfiddle.net/Bbw7r/1/

4

3 に答える 3

2

要素の不透明度をそのコンテンツの一部に適用しないことは不可能だと思います。あなたができることは、次のような内容の要素を複製することです:

<div class="notice_container" id="showMe"></div>
<div class="notice_wrapper" id="showMeWrapper">
    <div class="notice">some notice!</div>
</div>

同じ寸法#showMeと#showMeWrapper同じ位置を作成し、同じ位置にしますがshowMeWrapper、スタイルを設定せずに残します (透明な背景、境界線なしなど)。要素のみをアニメーション化し#showMeます。寸法または位置の変更をアニメーション化する場合は、両方をアニメーション化します。

于 2013-08-21T16:04:44.893 に答える
0

opacityプロパティ - 私の経験といくつかの情報 ( http://www.w3schools.com/cssref/css3_pr_opacity.aspなど) のように - 常に継承されます。

考えてみてください。ある要素を半透明にし、不透明度を 0.5 にするとしたら、何が表示されると思いますか? 論理的には、すべての要素が半透明になります。そうしないと、その中のすべてのアイテムを半透明にする必要があります。

したがって、あなたの例には2つの解決策があります:

  1. notice_container を opacity:1 (不透明度 100%) に設定できますが、次のように半透明の背景色を設定できます。

    .notice_container
{
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black color */
}

この色のアニメーションは、jQuery-UI で実現できます (色のプロパティをアニメーション化できますが、テストしていません)。

  1. 私は別の方法を使用しています。私の背景と通知ブロックは、入れ子ではなく 1 つのレベルに配置されています。このような：

    <style>
/* Style for shadow */
.notice_shadow
{
  position:fixed;
  z-index:9000;
  left:0px; right:0px; top:0px; bottom:0px;
  background: black;
  opacity:0.7;
  display:none;
}
/* Style for notice itself */
.notice
{
  position:fixed;
  z-index:9001;
  left:50%; top:50%; /* centering notice in the center of the screen */
  width:200px;
  height:100px;
  margin-left:-100px; /* the second part of parameters used for centering*/
  margin-top:-50px;
  background: red;
  color:white;
  display:none;
}
</style>
<script>
$(function(){
   $('.notice').fadeIn(1000);
   $('.notice_shadow').fadeIn(1000);
});
</script>
<div class='notice_shadow'></div>
<div class='notice'>Hello, this is a notice!</div>

試してみてください、多分私はもっと単純になるでしょう。

ちなみに、単純な「モーダル」通知を作成しようとしている場合は、すぐに使用できる多くの実現があります。 1）

于 2013-08-21T16:06:59.633 に答える