jQueryを使った.animate（）の部分的な機能

Question

右側のdivをmouseenterの左側のものから離して、mouseleaveの位置に戻したいと思います。背景色が変化すると、イベントリスナーが動作することが確認されます。どうしてですか

$(this).animate(function() { 
    left: "+=10px"; 
    top: "+=10px" 
}) 

何もしていませんか？ここで

はcodepen

http://codepen.io/WallyNally/pen/RRzBAb

Answer 1

へのリンクがjQuery animateのページをご覧くださいです。関数の代わりに単純なオブジェクトを渡す必要があります。アニメーション化しているものでも、静的なCSS位置を持つことはできません。下のフィドルでは、私は相対的なポジションにしましたが、絶対的にでも固定でも可能です。

Fiddle w/ solution

$('#myDiv').on('mouseenter', function() { 
    $(this).animate({ 
    left: "+=10px", 
    top: "+=10px" 
    }); 
}); 

$('#myDiv').on('mouseleave', function() { 
    $(this).animate({ 
    left: '-=10px', 
    top: '-=10px' 
    }); 
})