內容滑塊概念

有人可以幫我創建一個簡單的內容滑動概念嗎？內容滑塊概念

我想要的東西可以在本網站的（https://www.palatine.fr）底部看到 - 4個面板，它們在懸停時滑出，並且在懸停後回到其原始狀態。我已經嘗試了一些使用css塊的小提琴，但是它變得非常複雜，而且我知道最終我需要jQuery來做一些事情，例如當鼠標懸停在面板上時不停止動畫。

所以我問的是，如果有人會如此善良，並幫助我創建這種類型的動畫內容的簡單概念？

編輯：http://jsfiddle.net/z3gY7/是我所做的，但它根本沒有多少，可能根本不會相互兼容。這基本上由div's和動畫完成。

來源

2014-01-18 Rywi

你可以發佈你已經到目前爲止已經試過代碼中的一個網站上，甚至更好？ – Zword

我想到的是這個，但它只能在頁面頂部工作，溢出需要修復等等。http://jsfiddle.net/z3gY7/ – Rywi

你的意思是你想要這樣的算法滑蓋的？ – 2014-01-18 14:27:10

LIVE DEMO

HTML：

<div class="slideContent"> 
    <p>Content here</p>  
    <div class="slideIn"><p>Sub Content</p></div>  
</div>

CSS：

.slideContent, .slideIn{ 
    height:300px; 
    width:180px; 
} 
.slideContent{ 
    position:relative; 
    overflow:hidden; 
} 
.slideIn{ 
    position:absolute; 
    left:0; 
    bottom:0px; 
    display:none; 
}

JQ：

$('.slideContent').hover(function(){ 
    $('.slideIn',this).stop().slideToggle(); 
});

_{重要提示：這一次的作品比你提供:)}

來源

2014-01-18 15:01:28

工程很好，但 - 上部分div應該向上移動，所以我比較喜歡動畫邊緣...... – sinisake

@nevermind如果你仔細看看OP問題中的例子，那麼這個問題可以執行所要求的確切方式**，甚至更好**。 –

正如我所看到的 - 元素（圖像？）向上移動。在示例中的文本行爲是有點奇怪... – sinisake

<div class="wrap"> 
<div class="wrap-inner"> 
    <div class="normal"> 
    Original text 
    </div> 
    <div class="hover"> 
    other text 
    </div> 
</div> 
</div> 

.wrap 
{ 
display:block; 
width:300px; 
height: 300px; 
position:absolute; 
top:0px; 
overflow:hidden; 
} 
.wrap-inner{ 
position:absolute; 
height:600px; 
width:300px; 
top:0; 
-webkit-transition: top 300ms ease; 
} 
.wrap-inner:hover{ 
top:-300px; 
} 
.normal 
{ 
display:block; 
width:300px; 
height:300px; 
background-color:green; 
} 
.hover 
{ 
width:300px; 
height:300px; 
background-color:red; 
}

我覺得你很接近，只需保持一個600px的容器內包裝，可以將兩個300px的項目放在一個下面。否則，當包裝高度爲300px時，第二項不會被渲染。

http://jsfiddle.net/z3gY7/4/

來源

2014-01-18 14:42:13 sabithpocker

http://jsfiddle.net/z3gY7/19/

HTML：

<div class="wrap"> 
    <div class='box'> 
<div class="normal"> 
Original text 
</div> 
<div class="hover"> 
other text 
</div> 
    </div> 
<div class='box'> 
<div class="normal"> 
Original text222 
</div> 
<div class="hover"> 
other text2222 
</div> 
    </div>  

</div>

CSS：

.wrap 
{ 

width:100%; 
height: 300px; 
position:absolute; 

overflow:hidden; 
} 
.box { 
    width:25%; 
    height:600px; 
    float:left; 
} 

.normal { 
    width:100%; 
    height:300px; 
    background-color:blue; 
} 
.hover { 
    width:100%; 
    height:300px; 
    background-color:red; 
}

而且，jQuery的：

$('.box').hover(
    function() { 
     $(this).stop().animate({ 'margin-top':'-300px' }, 1000); 
    }, 
    function() { 
     $(this).stop().animate({ 'margin-top': '0px' }, 1000); 
    } 
);

你可以改變速度，以滿足您的需求...

來源

2014-01-18 14:52:21 sinisake

內容滑塊概念

回答

相關問題