JQuery aimate margin top

У меня есть script на jsfiddle: http://jsfiddle.net/kX7b6/

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

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

Работает анимация, но не margin

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

Ответы

Ответ 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

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

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

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

Ответ 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);
};