淡入javascript中切換類

我相信我的問題很容易解決。我想在我的標題變爲可見時應用淡入，當不可見時淡出。所以我不想那麼粗糙。我嘗試了header.removeClass('clearHeader').addClass("darkHeader").fadeIn(slow);但這並沒有幫助我。我也嘗試在CSS中添加轉換，但這對我也沒有幫助。淡入javascript中切換類

的Javascript：

$(function() { 
    //caches a jQuery object containing the header element 
    var header = $(".clearHeader"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 50) { 
      header.removeClass('clearHeader').addClass("darkHeader"); 
     } else { 
      header.removeClass("darkHeader").addClass('clearHeader'); 
     } 
    }); 
});

CSS：

header { 
    width:100%; 
    height: 70px; 
    position: fixed; 
    z-index:999; 
    background-color:#fff; 
    box-sizing:border-box; 
} 
header nav { 
    display:inline-block; 
    float:right; 
    line-height:70px; 
    } 
header nav a { 
    margin-left: 25px; 
    font-weight: 700; 
    font-size: 18px; 
    } 
header nav a:hover { 
    text-shadow:1px 1px 1px red; 
    } 
.clearHeader{ 
    display:none; 
    opacity:0; 
    width: 100%; 
    -webkit-transition:all 1s ease-in-out; 
    -moz-transition:all 1s ease-in-out; 
    -o-transition:all 1s ease-in-out; 
    -ms-transition:all 1s ease-in-out; 
    transition:all 1s ease-in-out; 
} 
.darkHeader { 
    display:visible; 
    opacity:1; 
    z-index:999; 
}

CODE PEN

來源

2016-06-19 pHenomen

它是空的codepen – brk

http://codepen.io/anon/pen/VjKbma – pHenomen

嘗試刪除不透明度和CSS顯示可見的代碼，並嘗試淡入和淡出一樣：

if (scroll >= 50) { 
    header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow'); 
} else { 
    header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow'); 
}

來源

2016-06-19 04:16:44

我從darkHeader中刪除不透明度，但不是從clearHeader，它的工作原理。謝謝。 – pHenomen

要解決您的問題，您可以簡單地使用jQuery的animate。 Here's the syntax and explanation。它順利地動畫您想要動畫的任何css屬性。因此，你可以這樣做：

CSS：

header { 
    opacity:1; 
}

（只設置默認值）

JS：

header.animate({opacity: "0"}, 500);

淡出，而同樣的事情，但不透明度爲1〜淡入。您可能想要將類的顯示部分註釋掉以進行測試，因爲它可能會影響它的所有行爲。

來源

2016-06-19 04:48:54 Deuxis

淡入javascript中切換類

回答

相關問題