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
    }
}