我现在有页脚出现在页面滚动过一个设置点后，但希望显示为用户滚动而不是刚刚出现在屏幕上（因为它目前是这样）。在页面上动画的页脚

希望知道是否可以通过CSS转换或最佳实践来实现。

活生生的例子 http://jsfiddle.net/robcleaton/3zh6h/

CSS

#footer { 
    background: black; 
    width: 100%; 
    height: 48px; 
    position: fixed; 
    z-index:300; 
    bottom: 0; 
    display: none; 
} 

#footer ul.navigation li { 
    float: left; 
    margin-right: 16px; 
    display: block; 
}

$(function(){ 
    $(window).scroll(function() {    
     $('#footer').toggle($(document).scrollTop() > 100); 
    }); 
})

HTML

<div id="footer"> 
    <div class="content-wrap"> 
    <ul class="navigation"> 
     <li><a href="#about">About</a></li> 
     <li><a href="#blog">Blog</a></li> 
     <li><a href="#support">Support</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div><!-- content-wrap END --> 
</div><!-- footer END -->

来源

2012-11-06 Rob

你在想什么动画？ jQuery可能[动画]（http://docs.jquery.com/Effects/animate） – Owlvark

你可以做以下这将使使用CSS转换

jQuery的

我们要添加或页脚取决于滚动位置

$(function(){ 
    $(window).scroll(function(){ 
     if($(document).scrollTop() > 100) 
     {  
       $('#footer').addClass("show"); 
     } 
     else 
     { 
      $('#footer').removeClass("show"); 
     } 
    }); 
})

CSS

删除类

然后，使用CSS，根据那个show类的存在显示或隐藏页脚。我们可以使用CSS过渡动画的变化

#footer 
{ 
    background: black; 
    width: 100%; 
    height: 0px; 
    position: fixed; 
    z-index:300; 
    bottom: 0; 
    overflow:none; 

    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
} 
#footer.show 
{ 
    height: 48px; 

    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
}

正如你可以看到显示它上面时，我们正在改变页脚的高度。当高度为0时，overflow:none;停止显示页脚的内容。

使用此方法，还可以通过设置不透明度值来淡入页脚，或者对颜色的更改设置动画效果。

JS小提琴：

http://jsfiddle.net/DigitalBiscuits/3zh6h/5/

来源

2012-11-18 14:12:59

你可以用动画和fadeIn()fadeOut() jQuery效果页脚。

$(window).scroll(function() {   
    if($(document).scrollTop() > 100) 
     $('#footer').fadeIn(); 
    else 
     $('#footer').fadeOut(); 
    });

如果深挖够到这些影响，你会发现，无论使用不透明度animate()效果。

来源

2012-11-06 13:40:39 a0viedo

这只是一个淡入淡出，我是在更多的动画 – Rob

我有一些乐趣与您的问题试验和我还没有看到任何人尝试这个（Fiddle）：

$(function() { 
    $(window).scroll(function() { 
     $("#footer").fadeTo("500", $(document).scrollTop()/100); 
    }); 
})

该解决方案也将淡出如果用户向后滚动，页脚就会退出。

有这种解决方案的一个主要缺点：因为它使用了fadeTo()方法，在IE浏览器的支持将是非常有限的（实际上，它会在IE的大多数版本打破 - 我不记得是什么支持9和10）。你可以通过使用十几个插件/修补程序中的一个在IE中添加支持来动画opacity属性，并相应地修改此解决方案（使用animate()而不是fadeTo()）来解决此问题。

让我知道如果您有任何问题。祝你好运！ :)

来源

2012-11-20 18:36:36

我想这应该是这样：

http://jsfiddle.net/gQqLJ/

$(function() { 
    $(window).scroll(function() { 
     if ($(document).scrollTop() > 100) { 

      $('#footer').slideDown(650); 

     }else if($(document).scrollTop() < 100){ 

      $('#footer').fadeOut(500); 
     } 
    }); 
});

来源

2012-11-23 20:10:27 Jai

JQuery的&动画

这样的事情，我会建议使用滑动的组合效果，褪色。它看起来更自然，因此不会在发生时震撼用户。

工作小提琴：http://jsfiddle.net/3zh6h/32/

相关的代码段（在拨弄没有使用，但这里演示了如何用编码牢记最佳实践做到这一点）：

jQuery.fn.slideFadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
};

的最佳实践

关于最佳实践，您可以找到一篇关于自定义动画的非常好的帖子，以及如何以可重复使用的方式编写它们here。

至少我知道这里没有“jquery footer动画”最佳实践，但是您可以从流行的，设计良好的网站中进行绘制，以了解哪些是有效的，哪些不是。这些例子不好，因为它取决于你网站的性质和背景。

CSS

我不会建议CSS转换，因为规格是不敲定（官方草案，讨论可以发现here）。

此外，它们不是跨浏览器兼容的，特别是w.r.t.旧版浏览器。但是再次，这只是我的看法。

来源

2012-11-24 10:14:37

在页面上动画的页脚

回答

jQuery的

CSS

JS小提琴：

相关问题