jQuery动画边距上方。

Question

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

悬停时没有任何反应

在悬停时，我希望绿色框与红色框重叠，并且使用负边距 -50px。但是没有任何反应。

动画有效，但边距不起作用

为了证明动画本身是有效的，我添加了一个透明度功能到动画中。就我所见，margin-top 在内联样式中设置为 0px。

- Jens Törnell

Answer 1

你使用了MarginTop，而不是marginTop

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

如果在动画进行中离开，它也会出现很多错误，这里有更新:

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

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

- Esailija

Answer 2

使用 'marginTop' 替代 MarginTop

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

- Mark Coleman

Answer 3

使用更少的代码实现相同的效果

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

查看最近的代码示例

- sandeep

---

很好看！ - Arash Hatami

Answer 4

MarginTop 应该改为 marginTop。

- bjornd

Answer 5

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

不是MarginTop，它是有效的。

- OptimusCrime

Answer 6

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

- meck373

Answer 7

如所述，应为marginTop而非MarginTop。

另外，为什么不将其动画化呢？ :)

See: http://jsfiddle.net/kX7b6/2/

- Marco Johannesen

Answer 8

请使用以下代码来添加一些边距：

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

请参考这个答案：滚动到特定边距的div

- Muhammad Wasim Khan