將動畫添加到滾動菜單

Question

所以我在弄亂某個div之后讓菜單進行動畫處理。 我設法顯示出來，但實際上沒有動畫。 我已經用.animate或fadein嘗試了一些不同的操作，但是沒有用。 不知道我在做什么錯，但請注意你我是一個jQuery菜鳥。

所以我的問題是我該如何輕松制作動畫？

我的代碼：

/* Menu show */
$(window).scroll(function () {
    var menuBG = $('.menu'),
        targetScroll = $('#slide2').position().top,
        currentScroll = $('html').scrollTop() || $('body').scrollTop();
    menuBG.toggleClass('show-menu', currentScroll >= targetScroll);
});

Answer 1

有很多方法可以實現這一目標。 我將演示兩個基於jQuery示例，其中對原始代碼進行了一些更改，而另一個示例是基於CSS3示例，對CSS3沒有進行任何更改，但對原始代碼進行了更改。

示例1-jQuery

的jsfiddle

HTML

<div class="menu">this is the red menu</div>
<div id="slide2">this the blue slide2</div>

CSS

.menu{
    height:50px;
    background-color:red;
    display:none;
    position:fixed;
}

/*.menu.show-menu{
    display:block;
}*/

#slide2{
height:800px;
    background-color:blue;
}

JS

$(window).scroll(function () {
    var menuBG = $('.menu'),
        targetScroll = $('#slide2').position().top,
        currentScroll = $('html').scrollTop() || $('body').scrollTop();
    //menuBG.toggleClass('show-menu', currentScroll >= targetScroll);
    if(currentScroll>=targetScroll){
        $('.menu').fadeIn(1000);
        $('.menu').addClass('show-menu');
    }else{
        $('.menu').stop();
        $('.menu').removeClass('show-menu');
        $('.menu').fadeOut(500);
    }
});

示例2-CSS3

的jsfiddle

CSS

.menu{
    transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;
    height:50px;
    background-color:red;
    /* display:none; */
    opacity:0;
    position:fixed;
}

.menu.show-menu{
    /* display:block; */
    opacity:1;
}

#slide2{
height:800px;
    background-color:blue;
}