Question

我想创建一个非常类似于此网站的<div>动画：http://www.weareinstrument.com/about/。当您将鼠标悬停在较暗的灰色框和屏幕底部的图像上时，它们似乎会上下滑动，具体取决于您是否将它们悬停在上面。我似乎无法在源代码中找到它的jQuery。谁能告诉我它将如何完成？

Answer 1

这是实现这一目标的可能方法。假设默认情况下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)    
});

Answer 2

您可以使用css sprite并为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/

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

Here是小提琴。

Answer 4

以下是您可能喜欢的教程：

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

如何让这个div上下滑动悬停效果？

4 个答案: