頁腳上滑過渡jquery或CSS3

我試圖重新創建這個很酷的幻燈片頁腳，我發現The Internship Movie Site。現在我已經完成了線框佈局，但我無法猜測正確的CSS過渡效果。我試過使用「頂部」和「高度」過渡屬性，但我似乎無法得到它。我猜這只是我錯過的一些小事，或者我應該使用Jquery而不是CSS。讓我知道你們想和這裏的fiddle 頁腳上滑過渡jquery或CSS3

HTML

<!-- Begin Site Wrapper --> 
<div id="wrapper"> 

<!-- Begin Header --> 
<div id="header">Menu List Here 
    </div><!-- End Header --> 

<!-- Begin Site Content --> 
<div id="sitecontent">Some Site Content Goes Here 
    </div><!-- End Site Content -->  

<!-- Begin Footer --> 
    <div id="footerwrapper"> 
     <div id="footerleft">Left</div> 
     <div id="footercenter">Center</div> 
     <div id="footerright">Right</div> 
     <div id="hugetextreveal">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> 
    </div> <!-- End Footerwrapper --> 
</div> <!-- End Site Wrapper -->

CSS

#wrapper {width: 600px; margin: 0 auto;} 
#header {background: #000; color: #fff; height: 30px; text-align: center} 
#sitecontent {min-height: 400px; background: #ff0000;} 

#footerwrapper {width: 600px; height: 40px; background: #000; color: #fff; text-align: center; position: relative; overflow: hidden} 
#footerleft {width: 200px; float: left; position: relative } 
#footercenter {width: 200px; float: left; position: relative } 
#footerright {width: 200px; float: left; position: relative } 
#hugetextreveal {width: 100%; height: auto; float: left; padding-top: 20px; position: relative; transition: max-height 0.7s ease-in; } 

#footerwrapper:hover #hugetextreveal { 
max-height: 200px;}

來源

2013-12-18 RomeNYRR

我添加更改這些兩個車道，一看，真的很簡單

#footerwrapper {width: 600px; height: 40px; bottom:0px; background: #000; color: #fff; text-align: center; position: relative; overflow: hidden; transition: all 0.5s ease 0.2s; } 
#footerwrapper:hover { height:140px; bottom:100px; }

http://jsfiddle.net/e8sv2/7/

來源

2013-12-18 23:07:39

我是soooo close !!這是底部，這是使這項工作的關鍵之一:)。再次感謝！ – RomeNYRR

這不是跨瀏覽器兼容的。 – DrCord

@DrCord @DrCord基本上答案是應該引導的方式，而不是做海報的工作，但是如果我沒有錯誤的話，2010年引入了轉換。任何不支持3年前技術的瀏覽器都應該是不兼容的。這只是我的意識形態，讓設計師的生活變得簡單多了：D' –

有問題的頁面，你想複製的，這是所有的CSS transistions：

#footer:hover { 
    height: 295px; 
} 
#footer{ 
    -webkit-transition: height 0.5s ease; 
    -moz-transition: height 0.5s ease; 
    -o-transition: height 0.5s ease; 
    -ms-transition: height 0.5s ease; 
    transition: height 0.5s ease; 
}

來源

2013-12-18 23:03:44 DrCord

你也許可以做到這一點jQuery中：

$("#footerwrapper").hover(function() { 
    $("#hugetextreveal").fadeIn(700); 
}, 
function() { 
    $("#hugetextreveal").fadeOut(700); 
});

來源

2013-12-18 23:04:29 Bic

看起來你可能需要效果基本show和slideDown或animate（）而不是淡入淡出。 – Bic

頁腳上滑過渡jquery或CSS3

回答

相關問題