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

I want to create a <div> animation very much like this site: http://www.weareinstrument.com/about/. When you hover over the darker grey boxes and the images at the bottom of the screen they seem to slide up and down depending if you're hovering them. I can't seem to find the jQuery in the source code for it. Can anyone inform me on how it would be done?

我想创建一个非常像这个网站的

动画:http://www.weareinstrument.com/about/。当您将鼠标悬停在较暗的灰色框和屏幕底部的图像上时,它们似乎会上下滑动,具体取决于您是否将它们悬停在上面。我似乎无法在源代码中找到它的jQuery。任何人都可以告诉我它将如何完成?

4 个解决方案

#1

Here is a possible way to achieve this. Let's say the div showing by default has class default and the one that shows on hover has class onhover.

这是实现这一目标的可能方法。假设默认显示的div具有类默认值,而悬停时显示的div具有类onhover。

Fiddle: http://jsfiddle.net/jPneT/1/

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

#2

You can use a css sprite and animate background-position. It won't work in Firefox, so you need to use this plugin suggested here Background Position animation in jQuery not working in Firefox.
Good thing about this solution is that you can easily fallback to css in case JS is disabled.

您可以使用css精灵和动画背景位置。它在Firefox中不起作用,所以你需要使用这里建议的这个插件,jQuery中的背景位置动画不适用于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'});
});

Example:

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

#3

Here is a tutorial you might like:

这是您可能喜欢的教程:

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

#4

I did not search for the code on the website you have mentioned, but you could use something like this:

我没有在您提到的网站上搜索代码,但您可以使用以下内容:

<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 is the fiddle.

这是小提琴。

#1