JQuery 动画不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5680407/
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
JQuery Animate not working
提问by Greg
For some reason I can' t seem to get .animate to function properly. Can anybody see why?
出于某种原因，我似乎无法让 .animate 正常运行。有人能明白为什么吗？
I'm using this a container div...
我正在使用它作为容器 div ......
#valve-menu {
position: absolute;
width: 780px;
top: 200px;
background-color: #9C3;
margin-right: 9px;
margin-left: 10px;
}
then..
然后..
#control-cover{
height: 50px;
width: 180px;
overflow: hidden;
position: absolute;
}
#control{
background-color: #0C9;
height: 200px;
width: 180px;
margin-right: 10px;
position: absolute;
}
My Jquery is this
我的 Jquery 是这个
$(document).ready(function(){
??? //When mouse rolls over
??? $("#control-cover").mouseover(function(){
??? ??? $(this).stop()
.animate({height:'150px'},
{queue:false, duration:600, easing: 'easeOutBounce'})
??? });
??? //When mouse is removed
??? $("#control-cover").mouseout(function(){
??? ??? $(this).stop()
.animate({height:'50px'},
{queue:false, duration:600, easing: 'easeOutBounce'})
??? });
});
I want to have the control div partially hidden and then onmouseover expand.
我想让控件 div 部分隐藏，然后 onmouseover 展开。
回答by msmafra
This is working. If you're not using an Easing plugin there are only two available by default inside jQuery Swingand Linear: From jQuery website http://api.jquery.com/animate/
这是有效的。如果您没有使用 Easing 插件，那么在 jQuery Swing和Linear 中默认只有两个可用：来自 jQuery 网站http://api.jquery.com/animate/
Easing
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
宽松
.animate() 的剩余参数是一个字符串，用于命名要使用的缓动函数。缓动函数指定动画在动画中不同点的速度。jQuery 库中唯一的缓动实现是默认的，称为swing，和一个以恒定速度进行的，称为linear。使用插件可以使用更多缓动功能，尤其是 jQuery UI 套件。
$(document).ready(function(){
//When mouse rolls over
$("#control-cover").bind('mouseover mouseenter',function(){
$(this).stop()
.animate({height:'150px'},
{queue:false, duration:600, easing: 'swing'})
});
//When mouse is removed
$("#control-cover").bind('mouseout mouseleave',function(){
$(this).stop().animate({height:'50px'},
{queue:false, duration:600, easing: 'swing'})
});
});
回答by odrm
The $('#control-over')selector in jQuery will search your html for an element that has an idof control-over, e.g. <div id="control-over">. From your code sample, it looks like you have a CSS classcalled control-over. The two are not the same.
将$('#control-over')在jQuery选择将搜索你的HTML对于具有元素ID的control-over，如<div id="control-over">。从您的代码示例，它看起来像你有一个CSS类叫control-over。两者并不相同。
You need to either add the id=attribute to your html element, or search for the element by class name, like $('.control-over').
您需要将id=属性添加到 html 元素，或者按类名搜索元素，例如$('.control-over').
