jquery - jquery .animate 偽のボックスを他の方向に移動

Question

onclick 関数を作成しました。したがって、この関数が行うことは、私の div クラス ボックスに border 、 width 、および height を配置することでした。その後、この fake_box は右上隅に移動します。ただし、以下の関数は、fake_box を左上隅に移動するだけです。.animate - top and left を変更しようとしましたが、それでも左上隅に移動します。以下の機能で見逃したものはありますか? fake_box を右上隅に移動する解決策はありますか?

どうもありがとうございました！

function click_test(){
    $('.fake_box').css({'border' : '5px solid #000000' ,  'width' : "440" , 'height' : "280"});
    $('.fake_box').animate({top: '-=30px', left: '+=100px', width: '0', height: '0'}, 1000, function(){
            $('.fake_box').css({'border' : 'none' ,  'width' : "440" , 'height' : "280"});
    }); 

}

Answer 1

fake_boxどちらかabsoluteまたはデモの位置を変更してみてくださいここにfixed

css

.fake_box{
    position: fixed;
    width: 440px;
    height: 280px;
    border: 1px solid grey;
    right: 0;
    top: 0;
}

js

    $('.fake_box').click(click_test);

    function click_test(){
        $('.fake_box').css({
            'border' : '5px solid #000',  
            'width' : "440", 
            'height' : "280"
        });
        $('.fake_box').animate({
           top: '-=30px', 
           right: '+=100px', 
           width: '0', 
           height: '0'}, 1000, 
           function(){
              $('.fake_box').css({'border' : 'none' ,  'width' : "440" , 'height' : "280", 'top':'0','right':'0'});
        });    
    }