JS - 出现和动画答案

【问题标题】：JS - Appear & AnimateJS - 出现和动画
【发布时间】：2015-08-11 21:05:02
【问题描述】：

我有一个以display:none 开头的 div。我希望它在滚动时显示并在页面顶部向下动画（这是一个固定位置的菜单）。

我可以让它在滚动时显示，但我不知道动画。

$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = 120;
        var bottom_of_window = $(window).scrollTop();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            if ($(this).css('opacity')==0) {$(this).fadeTo(0,1);}
        } else {
            if ($(this).css('opacity')==1) {$(this).fadeTo(0,0).hide();}
            }    
    }); 
});

我可能正在查看$(this).animate，但我真的不知道我在做什么，也不知道将其合并到我现有的代码中。需要动画：将 div 的顶部从顶部 -66px 移动到 0px。

HTML：

<div class="hideme" style="display:none; z-index:4000; position:fixed; background-color:rgba(255, 102, 0, 0.95); top:0px; height:66px; width:100%; left:0%; border-bottom:1px solid rgba(255, 255, 255, 0.5)">
<A href="index"><img src="logo_01_151_45.png" alt="logo" style="position: fixed; top:10px; left:50%; margin-left:-490px"/></A>
</DIV>

您能提供的任何帮助将不胜感激。谢谢。

【问题讨论】：

您可以在 jsfiddle.net 上发布一些 html 或制作小提琴吗？
任何 css 都可以使用，因为我无法在小提琴中复制它
可以让它在网络上工作（多个浏览器）但不是 jsfiddle。不知道如何将 ajax 插入代码中。我的标题包括...

标签： jquery-animate

【解决方案1】：

已解决：

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = 120;
        var bottom_of_window = $(window).scrollTop();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            if ($(this).css('opacity')==0) {$(this).fadeTo(0,1).animate({top:'0px'});}
        } else {
            if ($(this).css('opacity')==1) {$(this).fadeTo(0,0).hide().animate({top:'-66px'});}
            }


    }); 

});

【讨论】：