图像在画面上淡入淡出

我正在尝试重新创建类似左侧发生的效果，并且徽标在页面的卷轴上淡入。向上滚动时在此处看到http://www.vogue.co.uk/。我有这个，但它确实不正确，我认为......对不起你们，编辑追加HTML和CSS图像在画面上淡入淡出

var divs = $('.logo-tiny'); 
$(window).scroll(function(){ 
    if($(window).scrollTop() <10){ 
     divs.stop(true,true).fadeOut("fast"); 
    } else { 
     divs.stop(true,true).fadeIn("fast"); 
    } 
    }); 




<div id="header"> 
<div id="logo"></div><div class="header-tiny"><div class="logo-tiny"></div> 
    <div class="header-navi"><a class="header-link">link1</a> |<a  class="header- link"> link2</a> |<a class="header-link"> link10</a></div></div> 
</div>

CSS

#header { 
    background-color: white; 
    width: 100%; 
    height: 150px; 
    min-height:50px; 
    margin:0 0 0 40px ; 
    z-index: 1000; 
    /*position: fixed;*/ 
} 
#logo { 
    background:url(RUNWAYMAGAZINE_LOGO-BK-hdr.png) no-repeat center; 
    width: 100%; 
    height: 105px; 
    margin:10px; 

} 
.header-tiny { 
    background-color: #fff; 
    border-bottom: 1px solid #ccc; 
    height: 25px; 
    width:100%; 
    padding-top:10px; 
     } 
.logo-tiny { 
    background-color: #000; 
    height:25px; 
    width:50px; 
     }

来源

2014-01-08 user3158473

你应该包括一些你的HTML也是如此。这样人们就能够确定这段代码是否与HTML正确链接。 – RacerNerd

我认为你的代码已经在工作了，只要在触发方法FadeIn和FadeOut –

之前删除停止并检查您的徽标是否已经显示。实际上，这是行得通的。我更新了你的jsFiddle稍作修改http://jsfiddle.net/yB9Jq/6/ –

CSS

没有滚动

visibility:hidden;

and top

visibility:visible;

动画

-webkit-transition-property: all; 
-webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease; 
-webkit-transition-delay: 0.2s;

来源

2014-01-08 23:38:36 AvrilAlejandro

检查了这一点：

var divs = $('.logo-tiny'); 
$(window).scroll(function(){ 
    if($(window).scrollTop() <10){ 
     divs.fadeOut("fast"); 
     console.log('a'); 
    } else { 
     divs.fadeIn("fast"); 
     console.log('b'); 
    } 
});

工作演示：[http://fiddle.jshell.net/D5M9H/]

来源

2014-01-08 23:42:44 uihelp

我不认为你真的改进了我们可以在问题中看到的代码，因为他的代码已经在工作。并且格式化代码至少是... –

图像在画面上淡入淡出

回答

相关问题