我該如何讓這個div上下滑動效果？

我想創建一個非常像這個站點的<div>動畫：http://www.weareinstrument.com/about/。當您將鼠標懸停在較暗的灰色框和屏幕底部的圖像上時，它們似乎會上下滑動，具體取決於您是否將它們懸停在上面。我似乎無法在源代碼中找到它的jQuery。任何人都可以通知我如何做？我該如何讓這個div上下滑動效果？

來源

2012-02-12 Farreal

以下是實現此目的的一種可能方法。假設div默認顯示類別爲default，並且在懸停時顯示的類別爲onhover。

小提琴：http://jsfiddle.net/jPneT/1/

$('.up-down').mouseover(function(){ 
    $('.default').stop().animate({ 
     height: 0  
    }, 200);       
}).mouseout(function(){ 
    $('.default').stop().animate({ 
     height: 200 
    }, 200)  
});

來源

2012-02-12 20:27:13 Ehtesham

我沒有搜索你所提到的網站上的代碼，但是你可以使用這樣的事情：

<div id="foo"> 
    <div id="onMouseIn" style="display:none"><img src="inPicture"/></div> 
    <div id="onMouseOut"><img src="outPicture"/></div> 
</div> 

$(document).ready(function(){ 
    $('#foo').hover(function(){ 
     //This is onMouseIn event 
     $('#onMouseIn').slideDown(150); 
     $('#onMouseOut').slideUp(150); 
    }, 
    function(){ 
     //This is onMouseOut event 
     $('#onMouseOut').slideDown(150); 
     $('#onMouseIn').slideUp(150); 
    }); 
});

Here是小提琴。

來源

2012-02-12 20:07:03 Atticus

在您的例子中，'e'在'功能（E）'完全是多餘的。 – Sparky 2012-02-12 20:39:42

@ Sparky672：是的，你說得對，我要把它拿出來。 – Atticus 2012-02-12 20:44:48

這裏是你可能會喜歡的教程：

http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

來源

2012-02-12 20:31:13 Alex

您可以使用CSS精靈和動畫background-position。它在Firefox中不起作用，所以你需要使用這裏建議的插件Background Position animation in jQuery not working in Firefox。
這個解決方案的好處在於，如果JS被禁用，您可以輕鬆地回退到css。

HTML：

<div id="img"></div>

CSS

#img { 
    height: 256px; 
    width: 256px; 
    background: url(http://i42.tinypic.com/auwns0.jpg) 0 0 no-repeat; 
} 

/* Fallback */ 
#nojs #img:hover { background-position: 0 -256px; }

JQ：

$('#img').hover(function(){ 
    $(this).stop().animate({'background-position': '0 -256px'}); 
}, function(){ 
    $(this).stop().animate({'background-position': '0 0'}); 
});

實施例：

http://jsfiddle.net/elclanrs/T2JXn/9/

來源

2012-02-12 20:49:52 elclanrs

我該如何讓這個div上下滑動效果？

回答

相關問題