jQuery动画边缘顶部答案

【问题标题】：jQuery animate margin topjQuery动画边缘顶部
【发布时间】：2011-12-10 00:50:57
【问题描述】：

我在 jsfiddle 上有一个脚本：http://jsfiddle.net/kX7b6/

悬停时没有任何反应

在悬停时，我希望绿色框以负边距 -50 像素与红色框重叠。什么都没有发生。

动画有效，但边距无效

只是为了表明动画本身正在运行，我在动画中添加了一个不透明度函数。据我所知，margin-top 设置为 0px inline。

【问题讨论】：

标签： javascript jquery css jquery-animate margin

【解决方案1】：

你有MarginTop而不是marginTop

http://jsfiddle.net/kX7b6/1/

如果你离开中间动画也是非常错误的，这里是更新：

http://jsfiddle.net/kX7b6/3/

请注意，我将其更改为 mouseenter 和 mouseleave，因为我不认为当您将鼠标悬停在红色或绿色区域上时取消动画。

【讨论】：

【解决方案2】：

使用'marginTop' 代替MarginTop

$(this).find('.info').animate({ 'marginTop': '-50px', opacity: 0.5 }, 1000);

【讨论】：

【解决方案3】：

用less代码检查同样的效果

$(".item").mouseover(function(){
    $('.info').animate({ marginTop: '-50px' , opacity: 0.5 }, 1000);
});

View recent fiddle

【讨论】：

又漂亮又漂亮！

【解决方案4】：

MarginTop 应该是marginTop。

【讨论】：

【解决方案5】：

$(this).find('.info').animate({'margin-top': '-50px', opacity: 0.5 }, 1000);

不是 MarginTop。有效

【讨论】：

【解决方案6】：

正如所说的marginTop - 不是MarginTop。

为什么不把它动画回来呢？ :)

见： http://jsfiddle.net/kX7b6/2/

【讨论】：

【解决方案7】：

我不知道“.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);
};

【讨论】：

【解决方案8】：

使用以下代码应用一些边距

$(".button").click(function() {
  $('html, body').animate({
    scrollTop: $(".scrolltothis").offset().top + 50;
  }, 500);
});

看到这个答案：Scroll down to div + a certain margin

【讨论】：