文章/答案/技术大牛

发布

问如何让它淡出？
EN

Stack Overflow用户

提问于 2012-06-12 01:32:50

回答 3查看 125关注 0票数 0

下面的代码可以工作，但是#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);    
});

javascript

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-06-12 01:40:20

尝试使用不透明度，并使用jQuery的fadeIn功能。

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);

});`

票数 0

Stack Overflow用户

发布于 2012-06-12 01:36:01

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

我想这就是你要找的。有关fadeIn功能here的更多信息

票数 0

Stack Overflow用户

发布于 2012-06-12 01:40:26

尝试如下所示，

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10984819

复制

相似问题

问如何让它淡出？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让它淡出？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让它淡出？
EN