верхняя часть анимированного поля jQuery

Question

У меня есть скрипт на jsfiddle: http://jsfiddle.net/kX7b6/

Ничего не происходит при наведении

При наведении курсора я хочу, чтобы зеленое поле перекрывало красное поле с отрицательнымнаценка -50px.Ничего не происходит.

Анимация работает, но не на полях

Чтобы показать, что анимация работает, я добавил в анимацию функцию непрозрачности.Насколько я могу видеть, для margin-top установлено значение 0px inline.

Answer 1

У вас было MarginTop вместо marginTop

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

Это также очень глючит, если вы оставите середину анимации, вот обновление:

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

Обратите внимание, что я изменил его на mouseenter и mouseleave, потому что не думаю, что целью было отменить анимацию, когда вы наводите курсор на красную или зеленую область.

Answer 2

используйте 'marginTop' вместо MarginTop

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

Answer 3

проверьте этот же эффект с меньше код

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

http://jsfiddle.net/sandeep/kX7b6/4/

Answer 4

MarginTop должно быть marginTop.

Answer 5

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

Не MarginTop.Работает

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);
};

Answer 7

Как сказал marginTop - не MarginTop.

Кроме того, почему бы не оживить его обратно? :)

См: http://jsfiddle.net/kX7b6/2/

Answer 8

используйте следующий код, чтобы применить маржу

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

См. Этот ответ: Прокрутите вниз до div + определенное поле