javascript - CSS 可視性でフェードイン: 可視?

Question

モーダルやその他の div などの div を表示およびハイブするためにvisibility: hidden;andを使用しています。visibility: visible;リンクをクリックしてjavascriptを実行してdivを表示および非表示にするときにフェードイン効果が欲しいのですが、要素を引き続き使用してdivの可視性を切り替え<a>たいと思います。visibilityHTML/CSS/JavaScript/jQuery でこれを行う方法はありますか?

Answer 1

jQueryで：

$('selector').fadeIn();

CSS では、不透明度を使用します: (これは 50% です)

-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;

フェードインを手動で行いたい場合は、この不透明度を段階的に調整し、不可視のポイントに達しdisplay:noneたら、追加しますが、とにかくjQueryを使用する場合は、そのままにしてくださいfadeIn()

fadeIn()速度もサポートします。最初のパラメーターとしてミリ秒を追加するだけです。ドキュメントを見てください：http://api.jquery.com/fadeIn/

displayプロパティをcssに保持したい場合は、を使用してfadeTo()ください。不透明度が必要です: http://api.jquery.com/fadeto/

$(this).fadeTo("slow", 1); // 100% visible
$(this).fadeTo("slow", 0); // 0% visible aka hidden

Answer 2

空のスペースが表示されるように、display:none の代わりに visibility:hidden を使用することをお勧めします。

その場合、fadeIn() と fadeOut() は、フェードアウト後に表示を none に設定するため、機能しません。

代わりに、jQuery animate() を使用して不透明度をアニメーション化し、その後、コールバックに visibility:hidden/visible を追加します。

これがjQueryで行う方法です。

$('#a-id').click(
  if( $('#div-id').css('visibility') == 'hidden'){
    $('#div-id').animate({opacity: 1}, 'fast', function(){
    $('#div-id').css('visibility', 'visible');
  });
  }else{
    $('#div-id').animate({opacity: 0}, 'fast', function(){
    $('#div-id').css('visibility', 'hidden');
  }
);

もっと良い方法があると思いますが、これは問題なく動作します。

Answer 3

css3 でこれを達成することもできます: http://jsfiddle.net/dc7EV/

$("#hideme").click(function(){
    $(this).removeClass("fadein").addClass("fadeout");

    setTimeout(function(){
        $("#hideme").removeClass("fadeout").addClass("fadein");
    }, 2000);
});​

CSS

#hideme{
    border:solid 1px #000;
    background:#ccc;
    padding:20px;
}


@-webkit-keyframes fadeout{
    0%{opacity:1;visibility:visible;}
    99%{opacity:0;}
    100%{opacity:0;visibility: hidden;}
}
.fadeout {
    -webkit-animation:fadeout 1s linear;
    visibility:hidden;
}
@-webkit-keyframes fadein{
    0%{opacity:0;visibility:visible;}
    100%{opacity:1;}
}
.fadein {
    -webkit-animation:fadein 1s linear;
}
​

Answer 4

私はルネの答えを好みますが、可視性属性を強く使用したい場合(あなたが言うように)、 css() を使用してそうすることができます:

$('selector').css('visibility', 'hidden');
$('selector').css('visibility', 'visible');