Jsfiddleにスクリプトがあります: http://jsfiddle.net/kX7b6/
ホバーでは何も起こりません
ホバー時に、緑色のボックスを負のマージン-50pxで赤いボックスに重ねます。何も起こりません。
アニメーションは動作しますが、マージンは動作しません
アニメーション自体が機能していることを示すために、アニメーションに不透明度関数を追加しました。 margin-topは、私の知る限りインラインで0pxに設定されています。
MarginTop
の代わりにmarginTop
がありました
中間のアニメーションを離れると、非常にバグが多くなります。ここに更新があります。
注:mouseenter
およびmouseleave
に変更したのは、赤または緑の領域にカーソルを合わせたときにアニメーションをキャンセルするつもりがなかったためです。
つかいます 'marginTop'
の代わりにMarginTop
$(this).find('.info').animate({ 'marginTop': '-50px', opacity: 0.5 }, 1000);
lessコードでこの同じ効果を確認してください
$(".item").mouseover(function(){
$('.info').animate({ marginTop: '-50px' , opacity: 0.5 }, 1000);
});
MarginTop
はmarginTop
でなければなりません。
$(this).find('.info').animate({'margin-top': '-50px', opacity: 0.5 }, 1000);
MarginTopではありません。できます
「.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);
};
次のコードを使用してマージンを適用します
$(".button").click(function() {
$('html, body').animate({
scrollTop: $(".scrolltothis").offset().top + 50;
}, 500);
});
このansを参照してください。 div +一定のマージンまで下にスクロール