javascript - これをフェードインするにはどうすればいいですか？

Question

以下のコードは機能しますが、#wrapperone が画面にポップアップ表示されるだけです。それをフェードインさせる方法はありますか?

jQuery(window).load(function(){
    function fixDiv() {
        var jQuerydiv = jQuery("#wrapperone");
        if (jQuery(window).scrollTop() > jQuerydiv.data("top")) { 
            jQuery('#wrapperone').css({'position': 'fixed', 'top': '0', 'width': '100%', 'background': 'rgba(255,255,255,0.1)'}); 
        }
        else {
            jQuery('#wrapperone').css({'position': 'static', 'top': 'auto', 'width': '100%', 'background': 'transparent'});
        }
    }

    jQuery("#wrapperone").data("top", jQuery("#wrapperone").offset().top);
    jQuery(window).scroll(fixDiv);    
});

Answer 1

  $("#wrapperone").fadeIn();

これがあなたが探しているものだと思います。フェードイン機能について詳しくはこちら

Answer 2

不透明度で遊んで、jQuery のフェードイン機能を使用してみてください。

jQuery(window).load(function(){
function fixDiv() {
    var jQuerydiv = jQuery("#wrapperone");
    if (jQuery(window).scrollTop() > jQuerydiv.data("top")) { 
        jQuery('#wrapperone').css({'position': 'fixed', 'top': '0', 'width': '100%', 'background': 'rgba(255,255,255,0.1)', 'opacity': '0'}).fadeIn(100); 
    }
    else {
        jQuery('#wrapperone').css({'position': 'static', 'top': 'auto', 'width': '100%', 'background': 'transparent'});
    }
}

jQuery("#wrapperone").data("top", jQuery("#wrapperone").offset().top);
jQuery(window).scroll(fixDiv);

});`

Answer 3

以下のようにしてみてください、

function fixDiv() {
   var jQuerydiv = jQuery("#wrapperone");
   if (jQuery(window).scrollTop() > jQuerydiv.data("top")) { 
      jQuery('#wrapperone')
          .hide() //Hide the wrapper
          // v-- Position it
          .css({'position': 'fixed', 'top': '0', 'width': '100%', 'background': 'rgba(255,255,255,0.1)'})
          .fadeIn(); //Fade In
   }
   else {
      jQuery('#wrapperone')
           .hide() //Hide the wrapper
           // v-- Position it
           .css({'position': 'static', 'top': 'auto', 'width': '100%', 'background': 'transparent'})   
           .fadeIn(); //Fade In
    }
}