web-dev-qa-db-ja.com

jQueryアニメーションマージントップ

Jsfiddleにスクリプトがあります： http://jsfiddle.net/kX7b6/

ホバーでは何も起こりません

ホバー時に、緑色のボックスを負のマージン-50pxで赤いボックスに重ねます。何も起こりません。

アニメーションは動作しますが、マージンは動作しません

アニメーション自体が機能していることを示すために、アニメーションに不透明度関数を追加しました。 margin-topは、私の知る限りインラインで0pxに設定されています。

javascriptjquerycssjquery-animatemargin
33
Jens Törnell

MarginTopの代わりにmarginTopがありました

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

中間のアニメーションを離れると、非常にバグが多くなります。ここに更新があります。

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

注：mouseenterおよびmouseleaveに変更したのは、赤または緑の領域にカーソルを合わせたときにアニメーションをキャンセルするつもりがなかったためです。

61
Esailija

つかいます 'marginTop'の代わりにMarginTop

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

lessコードでこの同じ効果を確認してください

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

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

9
sandeep

MarginTopはmarginTopでなければなりません。

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

MarginTopではありません。できます

2
OptimusCrime

「.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);
};
1
meck373

前述のmarginTop-MarginTopではありません。

また、アニメーションを戻してみませんか？ :)

参照： http://jsfiddle.net/kX7b6/2/

1
Marco Johannesen

次のコードを使用してマージンを適用します

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

このansを参照してください。 div +一定のマージンまで下にスクロール

0
Muhammad Wasim Khan