圖像在畫面上淡入淡出

我正在嘗試重新創建類似左側發生的效果，並且徽標在頁面的卷軸上淡入。向上滾動時在此處看到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

我不認爲你真的改進了我們可以在問題中看到的代碼，因爲他的代碼已經在工作。並且格式化代碼至少是... –

圖像在畫面上淡入淡出

回答

相關問題