如何实现div的悬停滑动效果？

Question

我希望创建一个与此网站非常相似的 <div> 动画：http://www.weareinstrument.com/about/。当你将鼠标悬停在较暗灰色框和屏幕底部的图像上时，它们似乎会根据你的悬停而上下滑动。我无法在源代码中找到 jQuery。有人能告诉我如何完成吗？

- Hellodan

Answer 1

这里有一个可能的实现方式。假设默认显示的 div 具有类名default，当鼠标悬停时显示的 div 具有类名onhover。

样例代码： http://jsfiddle.net/jPneT/1/

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

- Ehtesham

Answer 2

你可以使用CSS精灵并动画化background-position。这在Firefox中不起作用，所以你需要使用这个插件建议在这里Background Position animation in jQuery not working in Firefox。
这种解决方案的好处是，如果JS被禁用，你可以轻松地回退到CSS。

<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'});
});

Example:

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

- elclanrs

Answer 3

我没有在你提到的网站上搜索代码，但你可以使用类似这样的代码：

<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);
    });
});

这里是 Fiddle。

- Atticus

---

在你的例子中，“function(e)” 中的“e”是完全不必要的。 - Sparky

Answer 4

这里有一个你可能会喜欢的教程：

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

- Alex