FadeOut optinon in css

-1

我一直在網站上工作，當你到達站點中的某個點時，內容淡入，當我回到上面時，它需要淡出。我已經按照自己的方式淡入，但是當我向後滾動時，它會消失而不會淡出。你能看看我的代碼，並告訴我我做錯了什麼？ HTML：FadeOut optinon in css

<body> 
    <img src="pictures/placeholder1.jpg" id="first_image"> 
    <header> 
     <img src="pictures/Norsein_logo_3.png"> 
     <nav> 
     <ul> 
      <li><a href="#">PROIZVODI</a></li> 
      <li><a href="#">GALERIJA</a></li> 
      <li><a href="#">O NAMA</a></li> 
      <li><a href="#">TIM</a></li> 
      <li><a href="#">KONTAKT</a></li> 
     </ul> 
     </nav> 
    </header> 
    <main class="maintext"> 
    </main>

CSS：

header { 
    width : 100%; 
    height: 15%; 
    font-weight: bold; 
    position:fixed; 
    font-size: 14px; 
    z-index: 150; 
} 
header img{ 
    float: left; 
    margin-left: 12%; 
    height: 80%; 
    margin-top: 5px; 
    visibility: hidden; 
    z-index: 150; 
} 

main { 
    height:2000px; 
    width:100%; 
    position:relative; 
    top: 100vh; 
    background-image: url("pictures/background2.jpg"); 
    background-repeat: repeat-y; 
    background-size: contain; 
    z-index: 100; 
}

的Javascript：

<script src="%jQueryCDN"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
    $(window).scroll(function() { 
    if ($(this).scrollTop() >= 500) { 
     $("header").css("background", "rgba(0, 0, 0, 0.5)").fadeIn(1000); 
     $("header img").css('visibility','visible').fadeIn(1000); 
    } else { 
    $("header").css("background", "transparent").fadeOut(1000); 
    $("header img").css('visibility','hidden').fadeOut(1000); 
    } 
}); 
    </script>

來源

2016-12-04 Antonio Gvardijan

你試過否則如果與布爾 – JonHerbert

此行是罪魁禍首

$("header").css("background", "transparent").fadeOut(1000);

你有沒有看到..

當你設置.css('background','transparent') ..它不爲什麼你的背景突然消失（變化的背景tranparent）

你其實可以刪除該部分只留下$("header").fadeOut(1000);採取任何時間..這是它會工作

來源

2016-12-04 16:34:50

很好的詮釋的反向保持下去（Y） – jafarbtech

在這裏你隱藏元素本身的可見性：隱藏;然後當fadeOut適用我們不能真正看到它，因爲它已經隱藏在一個單元中。

這裏是你修改的JS代碼，我希望它能按預期工作。

<script src="%jQueryCDN"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script> 
 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() >= 500) { 
 
     $("header").css("background", "rgba(0, 0, 0, 0.5)").fadeIn(1000); 
 
     $("header img").css('visibility','visible').fadeIn(1000); 
 
    } else { 
 
    $("header").fadeOut(1000); 
 
    $("header img").fadeOut(1000); 
 
    } 
 
}); 
 
    </script>

來源

2016-12-04 17:33:11

FadeOut optinon in css

回答

相關問題