從底部向上滑動閱讀更多內容

我試圖從一個div下滑動文本。每個文本都有可變長度。我創建了以下的jsfiddle：從底部向上滑動閱讀更多內容

這裏的問題是，它的幻燈片了（其它菜單項上移），而不是向下。我希望其他項目保留在頁面底部。

我知道，我已經取得的成就，到目前爲止可以很容易地只用CSS和過渡完成：

.item-reader {display:none} 
.menu-item:hover > .item-reader {display:block}

，但我想它向上滑動（這是另一個例子：http://return-true.com/2010/03/creating-a-slide-up-footer-using-jquery/）

謝謝如果有人會幫助我！

來源

2014-02-06 user3278918

也相當使用'.slideToggle（）'使用'.stop（）的的slideToggle（）'檢查HTTP： //jsfiddle.net/5AnRk/6/ – zzlalani

http://jsfiddle.net/5AnRk/4/

的Jquery：

$('.menu-item').hover(
    function() { 
     $(this).children('.read-more').show(); 
     $(this).animate({'marginTop' : '-25px'}); 
    }, function(){ 
     $(this).animate({'marginTop' : '0px'}, function(){ 
      $(this).children('.read-more').hide(); 
     }); 
    } 
);

CSS：

#menu-wrapper { 
    position:fixed; 
    bottom:0; 
    width: 100%; 
    z-index: 100; 
    height: 50px; 
}

來源

2014-02-06 11:50:51

像這樣的自定義動畫似乎符合法案。您可以動畫大多數屬性。如果動畫不是任務關鍵的，你也可以考慮一個CSS3動畫。它會降低用戶的CPU。 – superluminary

感謝您的快速響應！我調整了你的代碼： http://jsfiddle.net/Ronnos/7NP22/ 唯一的限制是，「多讀」鏈接只能包含一定數量的單詞，因爲它的高度是固定的。但現在我同意它，否則會更復雜。再次感謝 – user3278918

現在我已將所有內容都更新到了CSS：http://jsfiddle.net/Ronnos/9BXZ3/再次感謝 – user3278918

從底部向上滑動閱讀更多內容

回答

相關問題