javascript 我怎样才能让这个 div 上下滑动悬停效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9252176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make this div slide up and down hover effect?
提问by Farreal
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?
我想制作一个<div>非常像这个网站的动画：http: //www.weareinstrument.com/about/。当您将鼠标悬停在较深的灰色框和屏幕底部的图像上时，它们似乎会上下滑动，具体取决于您是否悬停在它们之上。我似乎无法在它的源代码中找到 jQuery。谁能告诉我它将如何完成？
回答by Ehtesham
Here is a possible way to achieve this. Let's say the divshowing by default has class defaultand the one that shows on hover has class onhover.
这是实现这一目标的可能方法。假设div默认显示具有 class default，而悬停显示的显示具有 class onhover。
Fiddle: http://jsfiddle.net/jPneT/1/
小提琴：http: //jsfiddle.net/jPneT/1/
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
});
回答by elclanrs
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 sprite 和 animate background-position。它在 Firefox 中不起作用，因此您需要使用此处建议的此插件jQuery 中的背景位置动画在 Firefox 中不起作用。
这个解决方案的好处是，如果 JS 被禁用，您可以轻松回退到 css。
html:
html：
<div id="img"></div>
css
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:
例子：
回答by Atticus
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);
});
});
Hereis the fiddle.
这是小提琴。
回答by Alex
Here is a tutorial you might like:
这是您可能喜欢的教程：
http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
