Javascript jQuery 动画页边距顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7806637/
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 margin top
提问by Jens T?rnell
I have a script on jsfiddle: http://jsfiddle.net/kX7b6/
我在 jsfiddle 上有一个脚本：http: //jsfiddle.net/kX7b6/
Nothing happens on hover
悬停时没有任何反应
On hover I want the green box to overlap the red box with a negative margin -50px. Nothing happens.
在悬停时，我希望绿色框以负边距 -50px 与红色框重叠。没发生什么事。
The animation works, but not margin
动画有效，但保证金无效
Just to show that the animation itself is working i added a opacity function to the animation. margin-top is set to 0px inline as far as I can see.
只是为了表明动画本身正在工作，我向动画添加了一个不透明度函数。就我所见，margin-top 内联设置为 0px。
回答by Esailija
You had MarginTopinstead of marginTop
你有MarginTop而不是marginTop
It is also very buggy if you leave mid animation, here is update:
如果你离开中间动画，它也很容易出错，这里是更新：
Note I changed it to mouseenterand mouseleavebecause I don't think the intention was to cancel the animation when you hover over the red or green area.
请注意，我将其更改为mouseenterandmouseleave因为我认为当您将鼠标悬停在红色或绿色区域上时，其目的不是要取消动画。
回答by Mark Coleman
use 'marginTop'instead of MarginTop
使用'marginTop'代替MarginTop
$(this).find('.info').animate({ 'marginTop': '-50px', opacity: 0.5 }, 1000);
回答by sandeep
check this same effect with lesscode
用更少的代码检查同样的效果
$(".item").mouseover(function(){
$('.info').animate({ marginTop: '-50px' , opacity: 0.5 }, 1000);
});
回答by bjornd
MarginTopshould be marginTop.
MarginTop应该是marginTop。
回答by OptimusCrime
$(this).find('.info').animate({'margin-top': '-50px', opacity: 0.5 }, 1000);
Not MarginTop. It works
不是 MarginTop。有用
回答by Marco Johannesen
As said marginTop - not MarginTop.
正如所说的 marginTop - 不是 MarginTop。
Also why not animate it back? :)
还有为什么不把它动画回来？:)
回答by meck373
i didn't know that the ".stop()" is necessary.
我不知道“.stop()”是必要的。
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 50){
$('.sidebar-padder').stop().animate({ 'height': '380px'}, 1000);
}else{
$('.sidebar-padder').stop().animate({ 'height': '600px'}, 1000);
};
回答by Muhammad Wasim Khan
use the following code to apply some margin
使用以下代码应用一些边距
$(".button").click(function() {
$('html, body').animate({
scrollTop: $(".scrolltothis").offset().top + 50;
}, 500);
});
See this ans: Scroll down to div + a certain margin
看到这个答案：向下滚动到 div + 一定的边距
