Question

所以我正忙着让菜单在某个div之后制作动画。我让它工作出现但不是实际动画。我已经尝试了类似.animate或fadein的一些不同的东西，但它没有用。不知道我做错了什么，但请注意你我是一个jquery noob。

所以我的问题是如何轻松制作动画？

我的代码：

/* 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，原始代码没有任何更改，但在css中添加了一些内容。

示例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;
}

将动画添加到scrolltop菜单

1 个答案: